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中即可。