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

Question

这个问题已经被问过好几次了，但提供的答案似乎都对我没有帮助：

在此处查看实际操作：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;
}

我的问题是该表中的某些列的内容需要被截断以适合表的给定宽度。但是，这不会发生。我得到两个相互重叠的表。

要求：

• 需要基于百分比。我无法设置绝对尺寸。
• 每行的高度不得超过一个文本行（如果我删除空格：nowrap，就会发生这种情况）
• 必须在 Chrome、Firefox 和 Internet Explorer 8+ 中运行
• 无法在彼此下方显示表格，因为打印时表格必须适合一张纸。

我尝试了什么：

• 在里面使用宽度和溢出。什么都没改变。
• “显示：表格；”包含 div - 表格不是有两列而是显示在彼此下方
• “表格布局：固定；” - 强制所有列具有相同的宽度
• 我知道第 2+3 列总共有 30% 的宽度，所以我尝试手动将第 1 列设置为 70% - 没有改变任何东西
• Zero-width spaces in content - 没有改变任何东西，可能是由于 white-space: nowrap;

相关问题：

• Table width exceeds container's width
• How do I prevent my HTML table from stretching
• HTML CSS How to stop a table cell from expanding
• Table Overflowing Outside of Div

Answer 1

你需要添加 table-layout 属性：

table-layout: fixed;

在表格 HTML 标记中也包括 width=100%，而不仅仅是样式标记。

http://jsfiddle.net/reeK5/

Answer 2

也许你会对我发现的max-width: 0; hack 感兴趣。

它有一些限制，我们应该使用 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/

Answer 3

.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>

Answer 4

在桌子上的测量工作方式不同。一般来说，表格单元格的宽度被处理为最小宽度。

如果您不介意添加额外的标记，一个解决方案是在您放置内容的每个表格单元格中放置一个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>

等等。

查看更新的小提琴：http://jsfiddle.net/bsQNj/4/

编辑：我看到小提琴需要一些工作 - 我忘记在必要的地方放置一些 div。但我希望你能接受这个想法。