css - インラインブロックとして表示されるテーブル行間のスペースを削除するには?

Question

私はレスポンシブテーブルのこの例に従っていました: http://dbushell.com/demos/tables/rt_05-01-12.html

しかし、インラインブロックとして表示されるテーブル行の間に奇妙なスペースがあります。デモは次のとおりです: http://codepen.io/anon/pen/Fksjw

マージンをゼロにしようとしましたが、このスペースを取り除くことはできません。

Answer 1

What you see is the default behaviour of inline (inline-block) elements. One possible solution is to set font-size and line-height to 0 to make white spaces invisible. Then you just reset them back to some values:

tbody {
    ...
    line-height: 0;
    font-size: 0;
}
tbody td {
    ...
    line-height: 20px;
    font-size: 14px;
}

http://jsfiddle.net/W2ACD/1/

Another solution would be manually remove all the line breaks and spaces between tr.

Answer 2

これを css に追加します。

table {
  border-collapse: collapse;
}

tbody tr {
   display: table-row;
}

tbody td {
   display: table-cell;
}

Answer 3

Inline-block 要素は、常に 3 ピクセルの余分なマージンを提供します。水平方向の辺ごとに 3 ピクセルを減算して解決できます。

tbody tr {
   display: inline-block;
   margin: 0 -3px;
   vertical-align: middle;
}