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

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