display inline without float - html

Question

I have 3 tables that looks like this:
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;
}

Answer 1

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>

Answer 2

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

Answer 3

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;
}