这是一个 jsfiddle,您可以在其中看到单元格在其容器外扩展(或者在表格发生这种情况时扩展表格的大小),因为:
- 一个长词,即使设置了“word-wrap: break-word”
- 即使设置了“溢出:隐藏”也是一个大的 div
http://jsfiddle.net/NUHTk/166/
<div class="container">
<div class="leftBlock">
Too-much-text-ъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъ
</div>
<div class="rightBlock">
Right block content
</div>
</div>
<div class="container">
<div class="leftBlock">
<div style="width: 1200px; height: 200px;">
Huge element
</div>
</div>
<div class="rightBlock">
Right block content
</div>
</div>
CSS
.container
{
width: 500px;
padding: 10px;
margin: 20px auto;
background: rgb(255,240,240);
}
.leftBlock, .rightBlock
{
display: table-cell;
vertical-align: top;
}
.leftBlock
{
width: 100%;
//max-width: 0;
word-wrap: break-word;
overflow: hidden;
background: rgb(240,255,255);
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
background: rgb(200,200,200);
}
可以通过向 .leftBlock 添加“max-width: 0”来解决这个问题,其结果可以在这里看到: http://jsfiddle.net/CyberAP/NUHTk/103/
处理表格时可能会出现同样的问题和修复。
这感觉就像一个 hack。我的问题是:
- 为什么 max-width: 0 解决了这个问题。
- 为什么以及如何改变单元格大小的行为。
- 我想,为什么这不是默认行为?
最佳答案
可以添加display:table;和 table-layout:fixed 到容器类。希望这能解决您的问题。
关于html - 最大宽度对表格单元格大小的影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31996622/