logo标签列表

强制HTML表格不超出其容器大小

htmlcsshtml-tablecolumn-width
49
这个问题已经被问过多次，但是提供的答案似乎都不能帮助我:
在这里可以看到实际效果:http://jsfiddle.net/BlaM/bsQNj/2/ 我有一个“动态”的（基于百分比的）布局，有两列。
.grid {
    width: 100%;
    box-sizing: border-box;
}
.grid > * {
    box-sizing: border-box;
    margin: 0;
}
.grid .col50 {
    padding: 0 1.5%;
    float: left;
    width: 50%;
}

在这些列中，我有一个表格，应该使用整个列宽。
.data-table {
    width: 100%;
}
.data-table td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

我的问题是，表格中的某些列需要截断内容以适应表格给定的宽度。但实际上并没有发生这种情况。我得到了两个重叠在一起的表格。
要求：
- 需要基于百分比。我不能设置绝对大小。 - 每行的高度不能超过一行文本（如果删除white-space:nowrap，则会发生这种情况） - 必须在Chrome、Firefox和Internet Explorer 8+中工作 - 不能将表格显示在彼此下面，因为它必须适合一张纸打印。
我尝试过：
- 使用元素在元素内部，并在其上使用width和overflow。没有改变任何东西。 - 在包含的
上使用"display:table;" - 表格只显示了一个列而不是两个，而且表格也会显示在彼此下面。 - 使用"table-layout:fixed;" - 强制所有列具有相同的宽度。 - 我知道第2列和第3列的总宽度为30%，所以我尝试手动将第1列设置为70% - 没有改变任何东西。 - 在内容中使用零宽度空格 - 没有改变任何东西，可能是由于white-space:nowrap;的原因。

相关问题：

这里有几个想法。如果你必须要截断一些文本，overflow:hidden; 基本上会取消掉那种效果，所以如果有多余的文本，它就会被隐藏起来。我不确定 a) 把所有内容放在一行并截断其中一些行的意义是什么（而不是隐藏），以及 b) 为什么要让多个表格重叠在一起。 - Keith
1
a) 我不想让那些表格重叠。这正是我想要避免的。 b) 如果文本无法适应表格的宽度，我可以截断它。 c) 为什么总有人在这个网站上问“为什么”，即使这并不能帮助解决问题？;) - BlaM
1
@BlaM 询问为何是确定原帖作者接受哪些解决方案变体的一种方式。 - Mr Lister
5个回答
80

你需要添加 table-layout 属性：

table-layout: fixed;

在表格的HTML标签中也要包括width=100%，而不仅仅是style标签。

http://jsfiddle.net/reeK5/

1
太棒了，谢谢！这个方法适用于任何宽度值，但我只测试了百分比宽度。 - John Suit
为什么在HTML标签中包含width="100%"？ - swenedo
1
@swenedo 在 HTML 标签中作为属性的样式是“内联”样式，它们优先于 <head> 元素或任何外部样式表中的任何样式。这是一种确保表格设置为 width: 100%; 而不是其他地方声明的 width: auto; 的方法。 - TylerH
4
根据MDN关于width属性的说明：“不要使用此属性，因为它已被弃用。” https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table -- 而且它是不必要的。 - Madbreaks
1
这会使所有列的宽度相同，这不是我想要的。包含数字值的列与包含大文本的列不需要分配相同的宽度。 - Dmitry Efimenko
非常感谢！我已经找了好几个小时了！ - nd091680
9
也许你会对我发现的 max-width: 0; 技巧感兴趣。
它有一些限制，我们应该使用CSS表格而不是HTML，但它确实有效。
.leftBlock
{
    width: 100%;
    max-width: 0;
    word-wrap: break-word;
    overflow: hidden;
}

.rightBlock
{
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}

http://jsfiddle.net/CyberAP/NUHTk/103/

我发现CSS 2.1规范明确未定义max-width和min-width对表格及其部分的影响。因此，任何相关行为可能是不可靠的。但了解这一点仍然很有趣。 - Palec
4

.div {
  width:300px;
  border:1px solid;
}
.breaked {
  word-break: break-all;
}
table{
  border:1px solid red;
}
td {
  border:1px solid green;
}
<div class="div">
<table>
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
  <br /><hr/><br />
  <table class="breaked">
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
</div>

仅适用于文本表格，不适用于包含复杂数据的表格。 - Tomáš Zato
2

表格上的尺寸处理方式不同。一般来说，表格单元格的宽度被处理为最小宽度。

如果您不介意添加额外标记的话，一个解决方法是在每个表格单元格内放置一个 div，并将内容放入其中。然后给这个 div 设置一个宽度或最大宽度。因此：

<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>

变成

<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>

等等还有其他内容。

请查看更新的fiddle：http://jsfiddle.net/bsQNj/4/

编辑：我发现这个fiddle还需要一些工作——我忘记在必要的地方放置一些div。但是我希望你能理解这个想法。

我只能使用基于百分比的宽度，因为我永远无法知道列有多宽。当我使用10em时，它可能太窄或太宽。虽然给<div>一个基于百分比的宽度并没有帮助。 - BlaM
抱歉，但正如我在编辑中所说的那样，我还没有将div添加到所有的td中。不过我仍然希望您能够理解我的想法。 - Mr Lister
缺少div并不是问题。"max-width: 10em"并没有帮助我。列的宽度可能是100em或5em。这取决于屏幕/纸张的大小，而我事先不知道。我可以尝试使用JavaScript来解决它，但这感觉像是一个肮脏的hack ;) - BlaM
10em只是一个例子，就像你的fiddle只是一个例子一样。将所需的大小应用于td中的div而不是td本身。问题不在于我想让您的列宽为10em，而是td拒绝缩小到您给定的任何宽度。这是我早些时候制作的一个fiddle：http://jsfiddle.net/MrLister/HnB3G/3/。 - Mr Lister
2
我的问题是我想要的宽度是“尽可能宽”。我不能使用绝对值，比如像素、点或em，因为我不知道表格有多宽。所有的都只是百分比。 - BlaM
-4

在你的CSS中：

table {
    table-layout: auto;
    width: 100%;
}

这应该涵盖所有的表格

当我添加这个时，什么也没有改变。 - BlaM
1
如果您的表格在HTML中声明了固定宽度（即width="500px"），则无法正常工作。 - RAC
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接