Question

我正在尝试使用两列任意（不可知）数据创建一个类似于表的布局。第二列可能包含很长的字符串，尤其是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没问题。

Answer 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/

具有任意列宽的表格式布局，不超过父边界

1 个答案: