0

我正在尝试使用两列任意（不可知）数据创建一个类似表格的布局。第二列可能包含很长的字符串，尤其是 URL。我想以这样一种方式设置表格，即第一列的宽度对应于其最宽的单元格，第二列的宽度填充剩余空间，直至其父级的边界。

不幸的是，我似乎无法在所有浏览器中同时满足这两个要求——只有一个或另一个。

我原来的想法是这样的：

<div>
    <dl style="display: table-row;">
        <dt style="display: table-cell; white-space: nowrap;">abc</dt>
        <dd style="display: table-cell; word-wrap: break-word;">asdfasdfadfadsfadfadf</dt>
    </dl>

    ...
</div>

在 Firefox 中，这非常有效。每个都<dl>充当<tr>，并且第一列与最宽的一样宽<dt>。

但是，在 WebKit 和 Opera 中（为什么不这样做），这会导致第二列（<dd>s）溢出<div>.

<div>我可以通过像这样更改父级来纠正这个问题：

<div style="display: table; table-layout: fixed;">

但是当我这样做时，它会强制所有浏览器（包括 Firefox）使每一列的宽度正好是父列宽度的 50%，这并不理想，因为第一列通常比第二列窄（导致空间浪费）。

这里有一些图表，如果不清楚我在说什么：http ://pastie.org/pastes/8040093/text?key=orwbkirzd4vdt611mmwaxw

有没有办法在不明确定义第一列的宽度的情况下做到这一点？旧版浏览器不是问题，所以如果它是 CSS3 就可以了。

4

1 回答 1

1

这在 Firefox 和 chrome 中似乎对我有用：

<div style="display:table; table-layout:auto; width: 100%;">
    <dl style="display: table-row;">
        <dt style="display: table-cell; white-space: nowrap;">abc</dt>
        <dd style="display: table-cell; word-wrap: break-word;
            word-break:break-all;">
            asdfasdfadfadsfadfadf asdfasdfadfadsfadfadf
            asdfasdfadfadsfadfadf asdfasdfadfadsfadfadf</dd>
    </dl>
</div>

jsfiddle：http: //jsfiddle.net/kingmotley/AFHnE/6/

于 2013-06-13T20:04:35.510 回答