CODEWITHSUNDEEP
cssresponsive-designcss-tables
Pierre
Pierre

Reputation: 13046

How to remove space between table rows displayed as inline-block?

I was following this example of responsive tables : http://dbushell.com/demos/tables/rt_05-01-12.html

but I have a weird space between table rows displayed as inline-block, here's a demo: http://codepen.io/anon/pen/Fksjw

I tried zeroing out the margins but I can't get rid of this space.

Upvotes: 3

Views: 8520

Answers (3)

arenas.v86
arenas.v86

Reputation: 1

The Inline-block elements always give 3 pixels of extra margin. You can solve it subtracting 3 pixel for each horizontal side:

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

Upvotes: 0

dfsq
dfsq

Reputation: 193281

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.

Upvotes: 6

Morpheus
Morpheus

Reputation: 9065

Add this to your css:

table {
  border-collapse: collapse;
}

tbody tr {
   display: table-row;
}

tbody td {
   display: table-cell;
}

Upvotes: 1

Related Questions