table边框和td的width失效

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

table元素有一个属性border，可设置table的边框。这个边框对内部元素有效。

不同于style:border,这个仅仅是外边框。

table{
width:60%;
border-collapse:collapse;
border:3px solid red;
}
<div class="container">
<table border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</div>

以下为结果：

这种直接设置border限制了整体table的样式，无法灵活的对部分td设置不同样式。

table{
width:60%;
border-collapse:collapse;
}
table td{
border: 1px solid green;
}
.blue{
border-color: blue !important;
}
<div class="container">
<table >
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td class="blue">4</td></tr>
</table>
</div>

------------------------------------------

width无效问题：

table-layout默认的布局是auto；根据内容会自动往外撑开。

只有设置为table-layout:fixed;才可以固定页面的宽度，但应用较少。

要想对个别列采用固定宽度，可将内容放在一个div中，将div设置width，放入到td中即可。