如何去除Safari中表格单元格多余的水平内边距？

针对你遇到的Safari表格显示偏大、存在额外水平内边距的问题，可尝试以下几种方案：

1. 明确重置单元格的内边距 #

你的通配选择器可能未覆盖Safari对<td>/<th>的默认样式，直接指定单元格标签的padding，同时重置Safari私有内边距属性：

table {
    table-layout: fixed;
    border-collapse: collapse;

    td, th {
        margin: 0;
        padding: 0;
        -webkit-padding-start: 0;
        -webkit-padding-end: 0;
    }
}

2. 调整表格边框与间距设置 #

若border-collapse: collapse仍有异常，可切换为border-spacing: 0（注意两者不可同时使用），并清除单元格默认边框：

table {
    table-layout: fixed;
    border-spacing: 0;

    td, th {
        margin: 0;
        padding: 0;
        border: none;
    }
}

3. 排查内容溢出导致的视觉误差 #

有时候并非内边距问题，而是单元格内的空白字符、换行符撑开了宽度，可添加内容溢出控制：

td, th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

该问题本质是Safari对表格元素的默认样式与Chrome、Firefox存在差异，通过明确重置单元格样式及私有属性，基本可以解决显示不一致的问题。

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