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>

以下为结果:

table边框和td的width失效

这种直接设置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中即可。

上一篇:dwz监听日期变化,dwz日期控件onchange不起作用,dwz框架时间控件不支持onchange事件


下一篇:心情闲适,发几个tatanic的图