Question

我正在尝试为SMF设计一个主题，这些表真的很头疼。我有一个像这样的示例html代码：

<div id="wrapper">
    <table class="table_list">
        <tbody class="header">
            <tr>
                <td colspan="4">
                    <h3>TESTING</h3>
                <td>
            </tr>
        </tbody>

        <tbody class="content">
            <tr class="window">
                <td class="as">
                    <a href="">12</a>
                <td>
                <td class="bs">
                    <a href="">23</a>
                <td>
                <td class="cs">
                    <a href="">34</a>
                <td>
                <td class="ds">
                    <a href="">45</a>
                <td>
            </tr>
        </tbody>
    </table>
</div>

它的CSS：

#wrapper {
width:500px;
margin:0 auto;
}
* 
{
    margin: 0;
    padding: 0;
    border-spacing: 0px;
    border-collapse: separate;
}
table.table_list {
    background:#16A085;
    width:100%;
}
tbody.header {background:#2980B9}
tbody.content {
    display:block;
}
td.as {background:#E74C3C}
td.bs {background:#8E44AD}
td.cs {background:#E74C3C}
td.ds {background:#8E44AD}

如果测试代码，如果css未更改为display：block，则td将保留其在表中的单元格位置。但如果它被改为阻止，则单元格就像内联元素！我很确定我做错了什么。

P.S。我需要阻止它的样式，即添加圆形边框。

JS Fiddle

Answer 1

对于初学者，您需要关闭标签。

其次，由于您要更改表体上的显示类型，这会改变浏览器计算单元格宽度的方式，您可以尝试专门设置宽度：

tr {
    display:block;
    width:100%;
    clear:left;
}
td {
    float:left;
    width:25%;
    box-sizing:border-box;
}

当显示：block时，保持表格对齐不变

1 个答案: