如何使用CSS而不是HTML表来实现这种基于表的布局？

Question

我希望屏幕上显示以下布局:

FieldName 1             [Field input 1]
FieldName 2 is longer   [Field input 2]
    .                         .
    .                         .
FieldName N             [Field input N]

要求:

• 字段名称和字段输入必须在左边缘对齐
• 两列都必须根据其内容动态调整大小
• 必须使用跨浏览器

我发现这个布局使用HTML表格非常简单,但是因为我看到很多CSS纯粹主义者坚持认为表格仅用于表格数据,我想我会发现是否有办法使用CSS.

Answer 1

我不会,我会用一张桌子.这是表格布局的典型示例 - 恰好是表格应该用于的事物.

Answer 2

我认为大多数答案都缺少原始提问者希望列宽取决于内容宽度的要点.我认为使用纯CSS执行此操作的唯一方法是使用'display:table','display:table-row'和'display:table-cell',但IE不支持.但我不确定这个属性是否可取,我发现创建一个宽列,因为只有一个长字段名称使得布局不那么美观且难以使用.在我看来,包裹线很好,所以我认为我刚才建议的答案不正确可能是要走的路.

Robertc的例子是理想的,但如果你真的必须使用表格,我认为你可以通过使用<th>字段名称使它更加"语义" .我不确定这个,所以如果我错了,请有人纠正我.

<table>
    <tr><th scope="row"><label for="field1">FieldName 1</label></th>
        <td><input id="field1" name="field1"></td></tr>
    <tr><th scope="row"><label for="field2">FieldName 2 is longer</label></th>
        <td><input id="field2" name="field2"></td></tr>
    <!-- ....... -->
</table>

更新:我没有密切关注这一点,但IE8显然支持CSS表,所以有些人建议我们应该开始使用它们.有一篇关于24种方式的文章,最后包含了一个相关的例子.