表格单元-宽度：100％，表格布局：固定；

Question

这是没有table-layout: fixed的代码table-layout: fixed http://jsfiddle.net/CDUBv/11/需要table-layout: fixed因为这是word-wrap: break-word 。 但是，在这里，如果添加它会发生什么： http : //jsfiddle.net/CDUBv/12/如何解决？ word-break: break-all无法在第一页中word-break: break-all删除或在第一div中添加稳定宽度不是解决方案。

Answer 1

这是一种可能与您需要的方法不同的方法。

HTML是：

<div id="table">
    <div id="t1">
        <img src="..."  width="50" width="50"/>
        <img src="..."  width="50" width="50"/>
    </div>
    <div id="t2">T2T2T2T2T2T2T2T2T2T ... T2T2T2T2T2T2T2T2T2T2T2T2T2</div>
</div>

和CSS：

#table{
    display: block;
    overflow: auto;
    width: 100%;
    margin-top: 100px;
    background-color: black;
}
#t1{
    float: left;
}
#t1 img {
    vertical-align: top;
}

#t2{
    word-wrap: break-word;
    overflow: auto;
    background-color: red;
}

我将#t1浮动到左侧以缩小图标的宽度。

然后， #t2的内容将填满宽度的其余部分。

获得背景颜色的技巧是将黑色添加到父容器，将红色添加到非浮动子元素。

局限性

如果您的内容很短，则#t2元素将比#t1短，因此您可能需要添加最小高度值以保留颜色图案（左侧为黑色，右侧为红色）。

如果要使图标垂直居中，则可能需要为#t1指定宽度，然后绝对定位图标。

参见演示： http : //jsfiddle.net/audetwebdesign/5j5Hz/