CSS Inline-table adds bottom margins

Question

I have a divider containing x tables in the form:

<div class="container">
  <table>....</table>
  <table>....</table>
  <table>....</table>
  <table>....</table>
</div>

The CSS code that corresponds to this is:

.container{
  width: 100%;
  clear: both;
  border-bottom: solid 2px #036;
  white-space: nowrap;
}

table{
  display: inline-table;
  border-bottom: solid 1px #000;
}

However, when this is applied, there is a gap of ~12px from the bottom border of the table and the bottom border of the divider. If I set "margin-bottom: -12px;" on the table it corrects the positioning error, but not in all browsers.

Does anyone know why there is a margin being made?

Answer 1

There seems to be a problem with display: inline-table, when you replace this with float: left the problem is gone. I have also set overflow: hidden on the .container div, so it takes the full height of the floating tables inside.

EDIT: In order to prevent the tables from wrapping, you could place the tables inside another left floating div that has white-space: nowrap; set.

CSS

* {
  margin: 0;
  padding: 0;  
}
.container {
  overflow: hidden;
  border-bottom: solid 2px #036;
}
.nowrap {
  float: left;
  overflow: hidden;
  white-space: nowrap;
}
table {
  float: left;
  border-bottom: solid 1px #000;
  border-spacing: 0px;
  padding: 0px;
}

​ HTML

<div class="container">
  <div class="nowrap">
    <table><tbody><tr><td>test test test test test</td></tr></tbody></table>
    <table><tbody><tr><td>test test test test test</td></tr></tbody></table>
    <table><tbody><tr><td>test test test test test</td></tr></tbody></table>
    <table><tbody><tr><td>test test test test test</td></tr></tbody></table>
  </div>
</div>
Test<br />​

See this updated JSFiddle

Answer 2

Do you have to use <table>? I strongly recomended you to use <div> instead. However in table (possibly you should add td in your css) set border to 0. This should help.