表 - 基于最大单元格的第一列大小

Question

这是我想要达到的效果：

以下是我目前的情况：

HTML：

<ul class="route-list"><li><span class="line">A</span><div class="route-operator"><div class="route">Southampton</div><div class="operator">Velvet</div></div></li></ul>

CSS：Check JSFiddle

我想实现一种效果，可以为我选择合适的第一列尺寸但不使用固定尺寸。

你会看到这是我目前的尝试。这个问题是它占用了大量可以更有效使用的空间。该解决方案需要具有最大宽度，如我当前的固定宽度解决方案，我不希望它显示大于3个字符的任何内容。

JSFiddle

由于

Answer 1

您在display: table;上使用li，但display: table-row;可以满足您的需求（如果我正确地阅读了您的问题）。

table-row使元素的行为类似于<tr>。

请参阅http://jsfiddle.net/tJ9Dd/1/