表格内section元素CSS底部边框不显示问题求助

问题核心原因 #

你遇到的问题根源在于HTML结构不合法：<section>标签并不是<table>元素的合法子元素。浏览器在解析这种不符合规范的结构时，会自动将<section>标签移出<table>之外，导致你写的CSS样式根本没有作用在表格内部的分组上，自然看不到border-bottom效果。

HTML表格的合法直接子元素只有 <thead>、<tbody>、<tfoot> 和 <tr>，用<section>包裹表格行是不符合标准的写法。

正确的解决方法 #

改用<tbody>标签来实现表格分组，这是表格原生支持的分组方式，浏览器能正确解析，样式也能正常生效。

修改后的HTML代码：

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>图片</th>
            <th>描述</th>
        </tr>
    </thead>
    <tbody class="physicists">
        <tr class="Richard-Feynman">
            <td>Richard Feynman</td>
            <td>Image1</td>
            <td>Descrption1</td>            
        </tr>
        <tr class="Albert-Einstein">
            <td>Albert Einstein</td>
            <td>Image2</td>
            <td>Descrption2</td>            
        </tr>
    </tbody>
    <tbody class="martial-artists">
        <tr class="Bruce-Lee">
            <td>Bruce Lee</td>
            <td>Image3</td>
            <td>Descrption3</td>            
        </tr>
        <tr class="Chunk-Norris">
            <td>Chunk Norris</td>
            <td>Image4</td>
            <td>Descrption4</td>            
        </tr>
    </tbody>
</table>

对应的CSS代码（方案一：直接给tbody加边框）：

tbody.physicists {
    border-top: solid 3px red;
    border-bottom: solid 3px red;
    /* tbody默认是table-row-group布局，需改为table才能让边框完整显示 */
    display: table;
    width: 100%;
}

对应的CSS代码（方案二：给分组首尾行加边框，保持表格原生布局）：

table {
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #ccc;
    padding: 8px;
}
/* 给物理学家分组首行加上上边框 */
tbody.physicists tr:first-child {
    border-top: solid 3px red;
}
/* 给物理学家分组末行加上下边框 */
tbody.physicists tr:last-child {
    border-bottom: solid 3px red;
}

补充说明 #

使用<tbody>进行表格分组不仅符合HTML规范，还能让表格结构更清晰，同时原生支持表格滚动、样式隔离等特性，是实现表格分组的标准方案。

内容的提问来源于stack exchange，提问作者Yixing Wang