我正在学习响应式表格的示例:http://dbushell.com/demos/tables/rt_05-01-12.html,但是我在使用inline-block显示表格行时出现了奇怪的间隔。 这是一个演示:http://codepen.io/anon/pen/Fksjw。 我尝试将外边距归零,但无法去除这个空白。
您看到的是内联(inline或inline-block)元素的默认行为。一种可能的解决方案是将font-size
和line-height
设置为0,使空白处不可见。然后您只需将它们重置为某些值:
tbody {
...
line-height: 0;
font-size: 0;
}
tbody td {
...
line-height: 20px;
font-size: 14px;
}
另一种解决方法是手动删除tr
之间的所有换行符和空格。
table {
border-collapse: collapse;
}
tbody tr {
display: table-row;
}
tbody td {
display: table-cell;
}
行内块级元素始终会增加3像素的额外边距。您可以通过为每个水平方向减去3像素来解决此问题:
tbody tr {
display: inline-block;
margin: 0 -3px;
vertical-align: middle;
}