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?

Maybe box model bug? http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug Try adding `-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;` — Cthulhu, Apr 10 '12 at 11:35

huysentruitw · Accepted Answer · 2012-04-10T13:12:46.813

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

edited Apr 10 '12 at 13:12

answered Apr 10 '12 at 11:52

huysentruitw

25,048
8
76
120

This fixes the margin issue, but I would like it so that the table objects do not wrap when the divider is shrunk (because of window resizing). This code seems to wrap the tables causing them to move below one another. – Stefan Dunn Apr 10 '12 at 12:34
What about setting something like `min-width: 800px;` on `.container` and set width of the tables so they always fit inside the defined `min-width` – huysentruitw Apr 10 '12 at 12:46
problem is that there will be x number of tables because they are generated from a php script. Each table represents data from a database. – Stefan Dunn Apr 10 '12 at 12:53
I have updated my answer in order to prevent the tables from wrapping – huysentruitw Apr 10 '12 at 13:13
Woops, got a bit side tracked, but this did work, Thanks!!. Now to tidy up my code ^_^ – Stefan Dunn Apr 11 '12 at 14:24

score 0 · Answer 2 · answered Apr 10 '12 at 11:40

0

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.

answered Apr 10 '12 at 11:40

Jakub

12,851
13
75
130

Sorry, I haven't posted that CSS code, but I have declared td with some border properties which create an outline. I used table's because I heard it was easier to inline them than divs because I do not want the tables to wrap in the divider when its size is reduced. – Stefan Dunn Apr 10 '12 at 12:36

CSS Inline-table adds bottom margins

2 Answers2