5

这是我的布局：

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，但没有奏效。如何在不硬编码任何像素宽度的情况下获得所需的结果？

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

4

3 回答 3

3

width只有当元素具有或max-width设置时，溢出隐藏才会按照您的预期运行。假设列已overflow:hidden设置，以下行为将变得明显。

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

Max-Width 设置 max-width 将强制列为设置值或内容的大小，以较小者为准。

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

显然，您希望表格适合容器的大小，这为您留下了三个选择：

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

选项 3 可能是最好的选择。

需要注意的一件事是，通常您可以设置标题的宽度，以便在同一列中的单元格上强制使用相同的宽度。如果您想触发隐藏溢出，则情况并非如此，因为必须在被隐藏的同一元素上设置宽度。

于 2013-05-10T09:16:43.637 回答
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 */
于 2013-05-10T09:09:20.267 回答
1

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

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

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

于 2013-05-10T09:00:12.663 回答