如何为React styled component中嵌套的table、tr、th、td元素添加边框

你只需要在原有样式基础上，给table添加border-collapse: collapse合并相邻边框，再嵌套选择table下的th、td元素添加边框即可，修改后的styled组件代码如下：

const Skill1 = styled.div`
border: 1px solid black;

> table{
    border: 1px solid black;
    border-collapse: collapse;
    /* 选中table内所有th、td元素添加边框和内边距 */
    th, td {
      border: 1px solid black;
      padding: 4px 6px;
    }
    /* 可选：给表头添加背景色区分层级 */
    th {
      background-color: #f0f0f0;
    }
}
`

说明：不需要单独给tr元素添加边框，设置border-collapse后，td/th的边框会自动拼接形成完整的行、列分隔线，添加内边距可以避免内容紧贴边框，提升可读性。

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