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

 

转载于:https://www.cnblogs.com/DennyZhao/p/8559136.html