我有一个包含以下 CSS 的表格:
width: 100%;
border-spacing: 0px;
table-layout: fixed;
然后我用以下类指定了 3 列:
@UsedColumnWidth: 26px;
@DeleteColumnWidth: 18px;
.UsedCountColumn {
width: @UsedColumnWidth;
}
.DeleteColumn {
width: @DeleteColumnWidth;
}
.CapabilityColumn {
/*width: @ContainerWidth - @UsedColumnWidth - @DeleteColumnWidth;*/
/*width: 100px;*/
}
我在查看 chrome 开发人员工具时注意到我的 UsedCountColumn
和 DeleteColumn
的宽度比我指定的多 2 个像素,我无法弄清楚为什么会发生这种情况。我认为边界间距可能搞砸了,但我将其设置为 0。关于为什么会发生这种情况有什么想法吗?
最佳答案
这就是为什么它添加填充而不显示它的原因。我认为您正在使用 LESS :)
如果我们谈论的是“浏览器默认 css”,那么肯定会有一些填充和边距。
人们制作 reset.css 文件的原因是浏览器有不同的“默认 css 值”。
例如。一些浏览器的背景是灰色/黄色,而其他浏览器则完全是白色。
为了确保更好的布局并使其在其他浏览器中看起来相同,您需要进行 css 重置。
例子。
* {
margin: 0;
padding: 0;
/* ect styles */
}
还有……
总视觉宽度 = padding + width + border
总填充宽度=填充+边距+宽度+边框
同样适用于 height ofc :)
关于html - table td width 指定多2px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13935780/