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;
}

我的问题是该表中的某些列包含需要截断的内容以适合表的给定宽度。但这并没有发生。我得到两张相互重叠的桌子。

要求：

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

我尝试了什么：

里面并使用宽度和溢出。一无所获。
“display：table;”包含div - 而不是有两列，表格显示在彼此之下
“table-layout：fixed;” - 强制所有列具有相同的宽度
我知道第2 + 3列的宽度总共有30％，所以我尝试手动将第1列设置为70％ - 没有改变任何内容
Zero-width spaces - 没有改变任何内容，可能是由于空格：nowrap;

相关问题：

Answer 1

您需要添加table-layout属性：

table-layout: fixed;

还在表格HTML标记中包含width = 100％，而不仅仅是样式标记。

http://jsfiddle.net/reeK5/

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

等等。

请参阅更新的小提琴：http://jsfiddle.net/bsQNj/4/

编辑：我看到小提琴需要一些工作 - 我忘了把一些div放在必要的地方。但我希望你能解决这个问题。

Answer 3

＆＃13;

.div {
  width:300px;
  border:1px solid;
}
.breaked {
  word-break: break-all;
}
table{
  border:1px solid red;
}
td {
  border:1px solid green;
}

＆＃13;

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

＆＃13;

Answer 4

在你的CSS中：

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

那应该涵盖所有表格

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

4 个答案: