设置width:100%的table无法与父div对齐两侧有小于1px间隙如何解决

问题原因 #

1. 父容器.playlist未显式设置padding: 0，部分浏览器默认会给块级元素添加极小的默认内边距，也可能存在全局div内边距规则未被覆盖
2. 表格未设置table-layout: fixed，默认的自动表格布局会根据单元格内容计算宽度，容易出现百分比宽度计算偏差，产生半像素间隙
3. 你使用了百分比宽度的固定定位父容器，当父容器计算后的宽度为非整数时，浏览器的亚像素渲染逻辑会导致表格和父容器之间出现小于1px的间隙
4. 单元格选择器规则不规范，td未限制在.playlist作用域下，可能被全局td样式覆盖产生额外边距或内边距

解决方案 #

按顺序尝试以下修改即可：

• 给父容器.playlist显式添加padding: 0，清除默认内边距
• 给.playlist table添加table-layout: fixed，强制表格按设定宽度渲染
• 针对亚像素间隙问题，给表格添加width: calc(100% + 1px); margin-left: -0.5px;，抵消半像素的渲染偏差
• 修正单元格选择器为.playlist th, .playlist td，避免全局样式干扰

修正后的完整CSS代码 #

.library,
.player,
.playlist {
    box-sizing: border-box;
}

.playlist {
    position: fixed;
    border: 1px solid black;
    width: 70%;
    height: 90%;
    left: 30%;
    top: 10%;
    /* 新增：清除父容器内边距 */
    padding: 0;
}

.playlist table {
    margin: 0;
    padding: 0;
    width: 100%;
    border-collapse: collapse;
    /* 新增：固定表格布局 */
    table-layout: fixed;
    /* 可选：如果还有间隙就打开下面两行，抵消亚像素偏差 */
    /* width: calc(100% + 1px);
    margin-left: -0.5px; */
}

/* 修正：限制td作用域 */
.playlist th,
.playlist td {
    margin: 0;
    padding: 0;
    border: 2px solid black;
}

如果修改后还有间隙，可以把父容器.playlist的border暂时注释掉，排查是不是边框重叠导致的视觉间隙。

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