如何为表格列添加边框？表格样式优化实现方案咨询

要实现包含列边框的表格样式，核心是利用CSS的border-collapse属性合并表格边框，同时为表头（th）和单元格（td）添加边框样式，具体操作如下：

1. 调整CSS样式 #

修改原有CSS代码，补充关键属性：

table {
    border: 1px solid;
    width: 20.5%;
    border-collapse: collapse; /* 合并表格与单元格边框，避免重复线条 */
}

th, td {
    border: 1px solid; /* 为所有表头和单元格添加边框 */
    padding: 8px; /* 可选：添加内边距让内容排版更宽松美观 */
    text-align: left; /* 用CSS统一控制对齐，替代HTML中的align属性 */
}

2. 优化HTML代码（可选） #

移除HTML标签中冗余的align属性，让结构与样式分离，便于后续维护：

<table>
    <tr>
        <th>Ann-Maree Smith</th>
        <th>Mitz Perez</th>
    </tr>
    <tr>
        <td>Bld 40:133, Wollongong<br>Campus</td>
        <td>Bld 4:105, Wollongong<br>Campus</td>
    </tr>
    <tr>
        <td>(02) 4221 4714</td>
        <td>(02) 4221 3833</td>
    </tr>
    <tr>
        <td>Mon-Fri</td>
        <td>Mon-Fri</td>
    </tr>
    <tr>
        <td>ams@uow.edu.au</td>
        <td>mperez@uow.edu.au</td>
    </tr>
</table>

方法说明 #

• border-collapse: collapse：这是实现连贯边框的核心，它会让表格外层边框和单元格边框合并为单一线条，避免出现双重边框的视觉问题。
• 为th和td设置边框：直接给每个单元格添加边框，配合边框合并属性，就能快速实现你需要的列边框效果。
• CSS控制对齐与内边距：相比HTML的align属性，用CSS统一管理样式更符合现代前端开发规范，也更易修改和扩展。

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