带有空格的表：nowrap和一列需要溢出：隐藏

时间：2013-05-10 08:43:14

标签： css html-table

这是我的布局（and Fiddle）：

body {
  font: 12px sans-serif;
}
#div1 {
  width: 750px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: lime;
}
#table1 {
  background-color: white;
}
#table1 th, #table1 td {
  white-space: nowrap;
}
.class1 {
  background-color: pink;
}
/* all background colors are for testing */
<div id="div1">
  <table id="table1">
    <tr>
      <th>Name</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Fr<br/>10</th>
      <th>Sa<br/>11</th>
      <th>Su<br/>12</th>
      <th>Mo<br/>13</th>
      <th>Tu<br/>14</th>
      <th>We<br/>15</th>
      <th>Th<br/>16</th>
      <th>Fr<br/>17</th>
      <th>Sa<br/>18</th>
      <th>Su<br/>19</th>
      <th>Mo<br/>20</th>
      <th>Tu<br/>21</th>
      <th>We<br/>22</th>
      <th>Th<br/>23</th>
    </tr>
    <tr>
      <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Curabitur bibendum tellus id turpis fermentum eu fermentum sapien ornare.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Donec eu neque tortor, ornare viverra sapien.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Praesent ac leo justo, et tempus turpis.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Vestibulum hendrerit metus et mauris volutpat hendrerit.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Quisque consequat ante sit amet nibh ornare quis gravida sapien consectetur.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Maecenas at turpis ut libero volutpat mattis eget a mi.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Fusce id dui in justo porta gravida eu ac leo.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Vivamus in metus at purus congue lacinia.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Aliquam suscipit mauris vulputate odio adipiscing vitae semper odio varius.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Vestibulum accumsan nunc at magna facilisis gravida.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Pellentesque tempus nisi mauris, quis porttitor purus.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Fusce tincidunt elit condimentum tellus aliquet in ultrices augue aliquam.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Vestibulum faucibus mauris sit amet enim bibendum fringilla.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Nam in purus non sapien cursus mollis.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Proin pulvinar ligula quis nulla varius tincidunt.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Integer faucibus hendrerit velit, nec tempor velit auctor id.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Nunc iaculis ligula pulvinar elit suscipit in volutpat augue dictum.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Pellentesque id augue sit amet nibh luctus eleifend ut non urna.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Suspendisse et neque arcu, ac fermentum ligula.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Mauris sed mauris vitae nisi suscipit bibendum sit amet vitae quam.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Morbi sagittis lorem laoreet velit consectetur ac sodales enim pretium.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Proin mattis urna in velit viverra in vulputate sapien laoreet.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Sed condimentum urna in orci interdum eu consequat felis scelerisque.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Quisque non nunc et purus mattis dictum.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Duis dictum nibh sed leo hendrerit eget dapibus lacus hendrerit.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Nam vel leo justo, sed rhoncus sem.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Ut sed augue sit amet elit scelerisque suscipit.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="class1">Proin vulputate dui et sapien tristique quis placerat nunc accumsan.</td>
      <td>Click here</td>
      <td>$100 - $300</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

我希望桌子适合固定宽度div。所有单元格都有nowrap所以我希望其中一列（标有.class1）缩小，以便表格与外部div一样宽。我尝试设置overflow: hidden但它没有用。如何在不对任何像素宽度进行硬编码的情况下实现所需的结果？

期望的结果是将所有内容保持在单行（因此是现在的），但是尽可能地切断一列（第一列）以使表适合固定的宽度。

3 个答案:

答案 0 :(得分：2)

工作小提琴： http://jsfiddle.net/vjfjd/8/

每次都不需要在行中添加“class1”和其他类。
伪类first-of-type，nth-of-type(n)将自动处理它们。

注意：overflow: hidden; white-space: nowrap; text-overflow: ellipsis;会确保“名称”列保留在一行，如果不是，则在文本末尾获取...适合指定宽度的一行。

body {
    font: 12px sans-serif;
}
#div1 {
    width: 750px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: lime;
}
#table1 {
    background-color: white;
    table-layout:fixed;
    width: 750px;
}
#table1 th, #table1 td {
    white-space: nowrap;
    width:20px;
    background-color: DarkSalmon;
}
tr th:first-of-type, tr td:first-of-type { /* use of pseudo classes */
    width:272px !important;
    background-color: pink !important;
    text-overflow: ellipsis;
    overflow: hidden;
}
tr th:nth-of-type(2), tr td:nth-of-type(2), /* use of pseudo classes */
tr th:nth-of-type(3), tr td:nth-of-type(3) {
    width:65px !important;
    background-color: yellow !important;
}
/* all background colors are for testing */

答案 1 :(得分：2)

如果元素设置为width或max-width，隐藏溢出只会按预期运行。假设列已设置overflow:hidden，则以下行为将变得明显。

<强>宽度 设置宽度将强制列设置值或内容的宽度，以较大者为准。

<强>最大宽度 设置最大宽度将强制列设置值或内容的大小，以较小者为准。

出于这个原因，您可能希望将宽度和最大宽度都设置为相同的值，如下所示：http://jsfiddle.net/vjfjd/7/。在我的示例中，我只设置了第一列的宽度，但理想情况下，您希望向所有列添加一个类并显式设置每列的宽度。

显然，您希望表格符合容器的大小，这样就有三个选项：

  1. 手动设置列宽，如果您决定更改容器的宽度，请更改它们。
  2. 使用Less之类的东西将容器宽度设置为变量，并根据该值设置列宽（第1列是从容器宽度中减去其他列之后的剩余空间）。这样您只能在一个地方更改宽度。
  3. 使用每列的百分比宽度。

    4. 选项3可能是最佳选择。

    需要注意的一点是，通常可以设置标题的宽度，以便在同一列的单元格上强制使用相同的宽度。如果要触发隐藏溢出，则不是这样，因为必须在隐藏的同一元素上设置宽度。

答案 2 :(得分：1)

我也看不到你的jsfiddle代码中使用的.class1选择器。 无论如何，我用我认为你可能想要的东西更新你的JS。

http://jsfiddle.net/vjfjd/5/

我将.class1添加到name列并更改了CSS。

相关问题
最新问题