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

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

转载作者：太空狗更新时间：2023-10-29 12:36:11

这是我的布局:

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/ .在我的示例中，我只设置了第一列的宽度，但理想情况下，您希望为所有列添加一个类并显式设置每列的宽度。

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

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

选项 3 可能是最佳选项。

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

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

文章推荐： html - 图像不工作 - 这是一个 Chrome 错误吗？

文章推荐：用于 LibXtract 的 Android.mk

文章推荐： javascript - 有没有办法跟踪对 HTML 元素的所有更改？

文章推荐： javascript - 页面加载时的 jQuery .fadeIn()？

jquery - 知道什么溢出:hidden has hidden
我想知道是否有任何方法可以调用和使用 overflow:hidden 隐藏得很好的东西。为了阐明我的意思，在 this example我想知道“This is hidden”是div的隐藏部分。这
html - 部分填充和边框 overflow hidden : hidden;
如果我们有以下HTML StackOverflow 使用以下 CSS * { margin: 0; padding: 0; } #i { overflow:
html - 图像未 overflow hidden :hidden
我正在使用 jQuery 制作幻灯片，我有几张图片应该一次滑入一张图片。我正在使用宽度与图像宽度相同的 div:80 像素。我使用了 white-space:no-wrap 和 overflow:hi
html - 保持溢出 :hidden really hidden
如果我有一个样式为 overflow: hidden; 的 div，我发现有时键盘操作会导致 div 滚动。而且由于没有滚动条，所以真的没有办法让 div 回到原来的状态。除了指定样式以防止出现这种情
ios - .hidden = YES 工作但 .hidden = NO 不工作
我有一个 UIImageView，在表格单元格中有一个自定义类，它也使用一个自定义类。 UIImageView 作为单元格自定义类的属性连接。 UIImageView 有一个调用方法的 UITapGe
css - hidden-xs hidden-sm 里面的视频下载了吗？
我正在创建一个网站，在一个 div 中我有一个视频，但我不想在移动设备上显示这个视频，所以我使用 hidden-xs 和 hidden-sm，到目前为止一切顺利。但是，我的问题是，当我使用这些类时，
C++ -fvisibility=hidden -fvisibility-inlines-hidden
我对 C++ 可见性属性有疑问。我已阅读 http://gcc.gnu.org/wiki/Visibility但我不太明白它是如何工作的。我想在我拥有的一些共享库中隐藏可见性。我相信这意味着符号被隐
css - 溢出 :hidden can't hidden skew dom event?
我通过CSS的草图创建了一个菱形，它位于一个圆圈的左上角。我为圆圈设置了overflow: hidden。钻石怎么还能触发cursor: pointer？这是 project 的代码笔. html
html - 溢出 :hidden making hidden the pseudo element itself
这个问题在这里已经有了答案: Shape with a slanted side (responsive) (3 个答案) 关闭 3 年前。
html - HTML 'hidden' 和 'aria-hidden' 属性有什么区别？
在使用 Angular Material 时，我一直在看到 aria 属性。有人可以向我解释一下 aria 前缀是什么意思吗？但最重要的是我想了解的是 aria-hidden 和 hidden 属性之
accessibility - 父级上的 Aria-hidden=true 不会使其子代也隐藏 aria-hidden
我正在阅读有关 aria 使用的一些内容，并遇到了以下文档: Fourth Rule of ARIA Use 。我不清楚的一个部分是: "Applying aria-hidden to a paren
jquery - :before gets hidden when setting overflow to scroll/hidden 里面的内容
以下是我的简单导航代码。单击右上角的图标时会出现两个 div。我还在顶部使用 :before 实现了这些分区的三 Angular 形提示。对于第一个 div，我设置了 overflow:scroll
html - input[type=hidden] 和 visibility ="hidden"的区别
input[type=hidden] 和 visibility : hidden; 有什么区别？最佳答案第一个是输入元素，第二个是CSS2中的样式。 visibility: hidden; vis
javascript - and <input type ="hidden"> on IE11 之间的区别
我遇到了一个奇怪的问题，似乎与浏览器相关(IE9 及更低版本与 IE11)，但想知道为什么会出现奇怪的行为。问题描述:我使用 Spring 框架并使用其相关标签库来检索 JSP 上的数据。有一个称为
ios - 如何在 iOS 中单击按钮时在 hidden=YES 和 hidden=NO 之间切换？
我在 viewDidLoad 中的两个 UIView 上将 hidden 属性设置为 YES。单击按钮时，它们将设置为 NO，因此将显示它们。如何在每次单击按钮时使这些属性在是/否之间切换？最佳答案
jquery - 是否可以只 overflow hidden 的文本而不 overflow hidden 的子绝对 div？
我正在尝试使用树状列表实现侧边栏。我希望树中的每个元素只填充一行——没有溢出，没有换行/换行。 overflow: hidden; 可能是一个很好的解决方案，但还有另一个要求 - 每行都有一个绝对 d
html - 无法 overflow hidden : hidden; and transform: translate: -100%; 的标题
我想用 overflow: hidden 隐藏一个超出容器的标题: HTML: Heading CSS: div { overflow: hidden; } h1 { transfor
jquery - body 之间的差异 { overflow hidden; } 和#div { overflow hidden ； }
我对 overflow:hidden 和 body 标签有疑问。这是一个小例子主体版本(不工作) http://jsfiddle.net/5hGSp/13/ DIV 版本(有效)
html - 是否存在 aria-hidden 是否足够或是否需要将值设置为 "true"(aria-hidden ="true")
html 的“隐藏”属性是一个 bool 值，不需要设置值。仅仅存在就足够了。 “aria-hidden”属性怎么样？光有存在感就够了吗？或者它是否需要设置值“true”？最佳答案 aria-hid
php - 多次溢出 :hidden containers with hidden content simultaneously toggled by links
在我的页面上，我有一个导航菜单和两个内容容器。内容容器使用overflow:hidden 以便一次只有一个子div 显示。我希望导航链接充当相关内容的激活器，以便在容器中滚动查看。因此，例如，如

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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