如何在React中创建老式表格？border-collapse设置无效问题排查

你的问题在于原生HTML的border="1"属性会同时给<table>、<td>（以及<th>）都添加边框，而你当前的CSS只给<table>加了边框，单元格没有边框，所以没法呈现那种老式的网格效果。

只需修改你的CSS，给表格的单元格也加上边框，同时保留border-collapse: separate和border-spacing来还原原生样式的间距感：

修改后的CalendarTable.css：

.calendarTable {
    font-size: 13px;
    text-align: center;
    width: 50%;
    margin: auto;
    border: 1px solid black;
    border-collapse: separate;
    border-spacing: 2px; /* 这个值对应原生border="1"的默认间距 */
    height: 50%;
}

/* 给所有单元格添加边框 */
.calendarTable td, .calendarTable th {
    border: 1px solid black;
}

.calendarTableContainer {
    margin: 3px;
    width: calc(100% - 6px);
}

修改后的React组件不需要改动，保持原来的结构即可：

import "./CalendarTable.css";
export default function CalendarTable() {
    return (
        <div className="calendarTableContainer">
            <table className="calendarTable">
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
            </table>
        </div>
    )
}

这样修改后，表格就会和原生HTMLborder="1"的效果完全一致：外层有边框，每个单元格也有独立边框，单元格之间还有细微的间距，就是你要的老式表格风格。

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