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

巴特西

table边框和td的width失效

最新文章

热门文章