CODEWITHSUNDEEP
htmlcss
user886596
user886596

Reputation: 2440

Eliminate gap between tbody tags

Is there a way to eliminate the slight gap between two tbody tags when they are both displayed inline like this?

http://jsfiddle.net/kttss/

what the html renders

As you can see in the fiddle, in between the two tables there is a slight gap. I know I can get rid of this manually by using negative margin, but this seems like a hassle since I have a table with a variable number of tbodys. 

<table style="margin:0;" border="1">
   <tbody  style="display: inline-block;  margin:0;">
      <tr>
         <td>
            1
         </td>
         <td>
            2
         </td>
      </tr>
      <tr>
         <td>
            3
         </td>
         <td>
            4
         </td>
      </tr>
   </tbody>
   <tbody  style="display: inline-block; margin: 0;">
      <tr>
         <td>
            1
         </td>
         <td>
            2
         </td>
      </tr>
      <tr>
         <td>
            3
         </td>
         <td>
            4
         </td>
      </tr>
   </tbody>
</table>

Upvotes: 8

Views: 7704

Answers (2)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70169

Use float instead of inline-block display. You also have to collapse the borders with border-collapse:collapse, or use border-spacing: 0 as in @JoeEnos's answer, as well.

table { border-collapse:collapse; }
tbody { float:left; }

Demo

With display: inline-block, the white-space in the markup (line-breaks, tabs) are collapsed and rendered as a single space. floats are not affected by this.

Upvotes: 4

Joe Enos
Joe Enos

Reputation: 40413

Looks like adding border-spacing: 0; to your table elements will help. Without this, there's 2 pixels surrounding each of the borders, which means there's 4 pixels between the tables.

Upvotes: 20

Related Questions