如何为表格内部单元格设置border-radius并适配背景属性

以下是调整后的完整代码，既满足仅带背景、3px内边距（含边框）的需求，也修复了背景溢出圆角的问题：

<table class="data" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th scope="col">Example Here</th>
            <th scope="col">Another Here</th>
            <th scope="col">One Here</th>
            <th scope="col">Two Here</th>
            <th scope="col">Three Here</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>This is some text.</td>
            <td>Data table with data.</td>
            <td>Data here.</td>
            <td>And more here.</td>
            <td>This is legit!</td>
        </tr>
        <tr>
            <td>This is some text.</td>
            <td>Data table with data.</td>
            <td>Data here.</td>
            <td>And more here.</td>
            <td>This is legit!</td>
        </tr>
        <tr>
            <td>This is some text.</td>
            <td>Data table with data.</td>
            <td>Data here.</td>
            <td>And more here.</td>
            <td>This is legit!</td>
        </tr>
        <tr>
            <td>This is some text.</td>
            <td>Data table with data.</td>
            <td>Data here.</td>
            <td>And more here.</td>
            <td>This is legit!</td>
        </tr>
    </tbody>
</table>
<style type="text/css">
/* Data Table */
table.data {
    width: 100%;
    border: 1px solid #dfdfdf;
    color: #303030;
    border-radius: 4px;
    line-height: 25px;
    border-collapse: separate;
    overflow: hidden;
    box-sizing: border-box;
}
table.data th {
    background: #eee;
    padding: 3px;
}
table.data td {
    padding: 3px;
}
table.data thead tr th:first-of-type {
    border-top-left-radius: 4px;
}
table.data thead tr th:last-of-type {
    border-top-right-radius: 4px;
}
</style>

关键修改说明： #

• overflow: hidden 修复背景溢出：给table添加该属性后，内部的背景会被表格的圆角边框截断，不再超出圆角范围。
• 仅给设置背景：移除了tbody偶数行的背景样式，直接将背景样式作用于元素，精准匹配需求。
• 调整盒模型与内边距：添加box-sizing: border-box确保边框包含在表格宽度内，统一和的padding为3px，满足“3px内边距（含边框）”的要求；设置border-collapse: separate保证圆角边框正常渲染。

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