css布局：table，table-cell

html-css026

css布局：table，table-cell,第1张

table： 会作为块级表格来显示（类似 <table>）

table-row： 浏览器会默认创建一个表格行（类似<tr>）

table-cell： 作为一个表格单元格显示（类似 <td>和 <th>）

具体实现

结果：

左边宽度固定，右边自适应

结果：

结果：

结果：

我们要 <div class="box">B</div>" 整个可以使用 text-align: right 属性，也就是整个B框要在红色背景的右边，需要先将他们设置 inline-block 属性

结果：

你编写表格的时候可以这样：

把第一列变成th

，这样就可以方便的控制了。

例如：三行三列的表格可以这样写：

<table>

<tbody>

<tr>

<th></th>

<td></td><td></td>

</tr>

<tr>

<th></th>

<td></td><td></td>

</tr>

<tr>

<th></th>

<td></td><td></td>

</tr>

</tbody>

</table>

或者你可以分别设置不同的类来达到控制的目的。

CSS可以这样写

th{

width:100px

}

td{

width:200px

}