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

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

请在此处查看此操作：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的"display:table；"-表没有两列，而是显示在彼此下方
"表布局：固定；"-强制所有列具有相同的宽度
我知道第2+3列的总宽度为30%，所以我尝试手动将第1列设置为70%-没有更改任何内容
内容中的零宽度空格-没有改变任何内容，可能是由于空白：nowrap

相关问题：

表格宽度超过容器宽度
如何防止HTML表拉伸
HTML CSS如何阻止表单元格展开
表Div外溢流

您需要添加表布局属性：

table-layout: fixed;

还包括表HTML标记中的width=100%，而不仅仅是样式标记。

http://jsfiddle.net/reeK5/

也许你会对我发现的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/

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

桌子上的测量工作方式不同。通常，表格单元格的宽度被处理为最小宽度。

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

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

在CSS中：

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

这应该涵盖所有的表

相关内容

最新更新

热门标签：