Question

我正在尝试将div与显示表一起使用。我希望第一个单元的长度比第二个单元占用的空间小100％。第二个单元格必须只占用文本的空间。我试过这种方式但没有成功。

HTML

<div class="tbl">
   <div class="t1">text 1</div>
   <div class="t2">text 2 3 4 5</div>
</div>

<div class="tbl">
   <div class="t11">text 1</div>
   <div class="t2">text 2 3 4 5</div>
</div>

CSS

.tbl {
display: table;
border: 1px solid #ccc;
width: 100%;
}

.t1, 
.t2 {
display: table-cell;
}

.t1 {
background: red;
width: 100%;
}

.t2 {
background: yellow;
}

.t11 {
background: red;
}

我怎么能这样做？感谢

JSFIDDLE

Answer 1

您可以将white-space: nowrap添加到第二个单元格。这适用于顶部单元对。对于第二对，您可以像添加顶部对一样添加display: table-cell; width: 100%，并且它可以正常工作。

the fiddle

CSS显示表格宽度为100％的单元格行为

1 个答案: