0

I have 3 tables that looks like this: enter image description here What I would like to do is have them all 3 line up in a row withou a space between each table(bottom table goes where the red square is). The problem I have is apparent, but I cannot seems to get rid of those gaps inbetween the table wihout using negative margins which I would like to avoid since I heard it's not good practice (browsers might break it). Would it also be possible to align the tables without floating them? I've tried to use a couple of these tricks but none seems to work: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Here is my css: my main body is 901px wide so I just changed my width to 300 for each table

.measure_data {
    width: 299px;
    border: solid 1px;
    border-collapse: collapse;
    display: inline-block;
}
john
  • 3,949
  • 7
  • 34
  • 56
  • 1
    Those tricks only apply to `inline-block` elements ... without `float` of course – DaniP Nov 21 '14 at 20:33
  • I have my tables as `inline-blocks` – john Nov 21 '14 at 20:41
  • 1
    did you try setting the spacing and margin to `0` (explicitly)? sorry if this sounds dumb but I have to ask – blurfus Nov 21 '14 at 20:45
  • 1
    possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – Vucko Nov 21 '14 at 20:45
  • funny how this stuff always shows up after I post.. I'll remove it if that answer works – john Nov 21 '14 at 20:47
  • I have tried margin 0 – john Nov 21 '14 at 20:48
  • @john if your tables are dynamically generated, then create them without any whitespace between them - [example](http://jsfiddle.net/fvmyd7ch/) – Vucko Nov 21 '14 at 20:51
  • This happen because of lack of space( margin/ padding creating issues). in this case you can use another parent wrapper class. – Uttam Kadam Nov 22 '14 at 10:57

3 Answers3

0

White space between elements is inevitable when using display: inline-block;. Try this. You need to make sure you "tie" the gaps together, like so: 

<div>
    <p>1/3</p>
</div><!--
--><div>
    <p>1/3</p>
</div><!--
--><div>
    <p>1/3</p>
</div>
James Martin-Davies
  • 652
  • 3
  • 14
  • my tables are being dynamically generated – john Nov 21 '14 at 20:48
  • The only realistic way of combatting this with inline-block elements then, is to minify the output source of the tables, so that the tables are on just one line, unfortunately. This is the biggest pitfall of inline-block elements. AngularJS deals with this perfectly, and a few tempting engines such as Twig. – James Martin-Davies Nov 21 '14 at 20:54
0

You should reduce the table with 299 to 290

.measure_data {
    width: 290px;
    border: solid 1px;
    border-collapse: collapse;
    display: inline-block;
}

Here click here to see in jsfiddle

Vel
  • 9,027
  • 6
  • 34
  • 66
0

Add position to second and third table:

.measure_data {
    width: 299px;
    border: solid 1px;
    border-collapse: collapse;
    display: inline-block;
}
.2{
   position: absolute; 
}
.3{
   position: relative; 
}
TM Dinesh
  • 210
  • 3
  • 13