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

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

要求:

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

我尝试了什么:

• 在里面并使用宽度和溢出.一无所获.
• "display:table;" 在包含div - 而不是有两列,表格显示在彼此之下
• "table-layout:fixed;" - 强制所有列具有相同的宽度
• 我知道列2 + 3总共有30%的宽度所以我试图手动将第1列设置为70% - 没有改变任何东西
• 内容中的零宽度空间 - 没有改变任何东西,可能是由于白色空间:nowrap;

相关问题:

• 表宽度超出容器的宽度
• 如何防止HTML表格拉伸
• HTML CSS如何阻止表格单元格扩展
• 表溢出Div

Answer 1

你需要添加table-layout属性:

table-layout: fixed;

表格HTML标记中还包括width = 100%,而不仅仅是样式标记.

http://jsfiddle.net/reeK5/

Answer 2

也许你会对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/Cyber​​AP/NUHTk/103/

Answer 3

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

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 放在必要的地方。但我希望你能接受这个想法。