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
}