我正在关注这个响应表的例子:http: //dbushell.com/demos/tables/rt_05-01-12.html
但我在显示为内联块的表行之间有一个奇怪的空间,这是一个演示:http ://codepen.io/anon/pen/Fksjw
我尝试将边距归零,但我无法摆脱这个空间。
我正在关注这个响应表的例子:http: //dbushell.com/demos/tables/rt_05-01-12.html
但我在显示为内联块的表行之间有一个奇怪的空间,这是一个演示:http ://codepen.io/anon/pen/Fksjw
我尝试将边距归零,但我无法摆脱这个空间。
您看到的是内联(inline-block)元素的默认行为。一种可能的解决方案是将font-size
和设置line-height
为 0 以使空白不可见。然后你只需将它们重置为一些值:
tbody {
...
line-height: 0;
font-size: 0;
}
tbody td {
...
line-height: 20px;
font-size: 14px;
}
另一种解决方案是手动删除tr
.
将此添加到您的CSS:
table {
border-collapse: collapse;
}
tbody tr {
display: table-row;
}
tbody td {
display: table-cell;
}
Inline-block 元素总是提供 3 个像素的额外边距。您可以为每个水平边减去 3 个像素来解决它:
tbody tr {
display: inline-block;
margin: 0 -3px;
vertical-align: middle;
}