css - 带有空白 : nowrap and one column needs overflow: hidden 的表

标签 css html-table

这是我的布局:

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)，但尽可能多地砍掉一列(第一列)以使表格适合固定宽度。

最佳答案

仅当元素设置了 width 或 max-width 时，Overflow hidden 才会按您预期的方式运行。假设列设置了 overflow:hidden，以下行为将变得明显。

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

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

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

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

  1. 手动设置列宽，如果您决定更改容器的宽度，则更改它们。
  2. 使用像 Less 这样的东西将容器宽度设置为变量并根据该变量设置列宽(第 1 列是从容器宽度中减去其他列后的剩余空间)。这让您只有一个地方可以更改宽度。
  3. 对每列使用百分比宽度。

选项 3 可能是最佳选项。

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

关于css - 带有空白 : nowrap and one column needs overflow: hidden 的表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16478274/

上一篇：javascript - 有没有办法跟踪对 HTML 元素的所有更改？

下一篇：html - 图像不工作 - 这是一个 Chrome 错误吗？

相关文章：

javascript - 如何在onclick事件中使用父表的id作为参数？

第一列固定大小且其余列大小相等的 Html 表

html - CSS 问题，表格未填满屏幕

css - 2 使用 Bootstrap 4 的列响应式布局

css - 无法通过 iPhone 上的 HTML5 视频元素访问文本字段

javascript - Css 移动导航 body 滚动

javascript 添加动态列表项从左到右然后向下——而不是仅仅向下？

html - 确保内联项始终出现在最后

javascript - 复制到剪贴板 Javascript

HTML 表格标题始终显示在窗口顶部

©2024 IT工具网  联系我们