Question

我想用div构造做以下事情：

<table border="1">
<tr>
<td>Field 1</td><td><input type="text"></td>
</tr>
<tr>
<td>Field 2 longest</td><td><input type="text"></td>
</tr>
<tr>
<td>Field 3 long</td><td><input type="text"></td>
</tr>
</table>

http://jsfiddle.net/6AvMm/

主要问题是，如何将第一列作为最长的宽度（字段2）？您知道，表格仅适用于表格数据 - 这种情况显然是一种布局。

Answer 1

HTML：

<div class="holder">
    <div class="row">
        <div class="cell">Field 1</div>
        <div class="cell"><input type="text" /></div>
    </div>
    <div class="row">
        <div class="cell">Field 2</div>
        <div class="cell"><input type="text" /></div>
    </div><div class="row">
        <div class="cell">Field 3</div>
        <div class="cell"><input type="text" /></div>
    </div>
</div>

CSS：

.holder{
    display:table;
    border:1px solid #000;
    border-width:1px 1px 0 0;
}
.row{display:table-row;}
.cell{
    display:table-cell;
    border:1px solid #000;
    border-width:0 0 1px 1px;
}

DEMO

Answer 2

使用display:table display:table-row;和display:table-cell;

<强> Updated fiddle

Answer 3

通常使用浮点数来完成。通常仍然不建议使用display: table布局。

<div class="column">
   <div class="row">
     <p>Your content</p>
   </div>
   <div class="row">
     <p>Your content (longest field)</p>
   </div>
</div>

<div class="column">
   <div class="row">
     <p>Your content</p>
   </div>
   <div class="row">
     <p>Your content</p>
   </div>
</div>

CSS：

.column{
    float: left;
}

Demo Fiddle

这提供了很大的灵活性，因为您可以轻松地在每列中单独调整行数，或者只是跳过整个＆＃34;行＆＃34;想想并在列div中用标题写出你的内容。 Example

与table方法相比，使用此方法可以更好地控制边距和位置（布局所需）。

Answer 4

由于表格不适合布局的语义原因，您似乎正在尝试离开表格。因此，如果您只使用display: table-cell以及更改属性函数的方式，我认为将来您的布局会出现问题。我建议使用类似下面的CSS来完全放弃表格：

div.tr {
    display:block;
    border: 1px solid;
    position: relative;
    padding: 3px;
}
div.tr div.td {
    display: inline-block;
    border: 1px solid;
    padding: 3px;
}
div.tr div.td:first-child {
    min-width: 35%;
}
.table {
    width: 40%;
    padding: 3px;
    border: 1px solid;
}

http://jsfiddle.net/6AvMm/6/

表格div：适应宽度

4 个答案: