前言:td在我们有具体宽度控制的时候显的格外难以驯服,但是知道了它的原理,解决起来就不会再怕了。。
首先table的宽度我们可以设置,具体的px或者百分比,浏览器会自动按比例给td分配宽度。
<table style="width: 600px;border-collapse: collapse;" >
<tr>
<td style="width: 200px;">我是200px</td>
<td style="width: 200px;">我也是200px</td>
</tr>
</table>
第二种情况:
<table style="width: 600px;border-collapse: collapse;" >
<tr>
<td style="width: 300px;">我是200px</td>
<td style="width: 300px;">我也是200px</td>
<td >我是根据内容的</td>
</tr>
</table>
第三种情况:
<table style="width: 600px;border-collapse: collapse;table-layout: fixed;" >
<tr>
<td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td>
<td >我是自由宽度</td>
</tr>
</table>
table-layout: fixed;
属性,代表td的宽度固定,不随内容变化。