Impossible to calculate the width of my Responsive Tables Boostrap

Question

I'm trying to make my responsible tables. http://codepen.io/Luiggi/pen/fLejw Here you have some pictures to show you my question and my layout.

First Layout Second layout Third Layout

50% and 33% tables never reach the far right.

Someone knows how to calculate the correct width? Where am I wrong?

I hope someone can help me.

Answer 1

Do you want something like Demo

table.tablas50 {
    width:49.86%;
    float:left;
}
table.tablas50.mright {
    margin-right:5px;
}
table.tablas33 {
    width:33.15%;
    float:left;
}
table.tablas33.mright {
    margin-right:5px;
}

change it to (at all places)

table.tablas50 {
    width:50%;
    float:left;
}
table.tablas50.mright {
    margin-right:0px;
}
table.tablas33 {
    width:33.33%;
    float:left;
}
table.tablas33.mright {
    margin-right:0px;
}

Answer 2

Here is another version of your code: http://codepen.io/Nico_O/pen/nIqwE

The problem you have is, that you use tables for layout. If you would use one more element as a wrapper you could use logical width like 33.333% for a third of a column. Normaly you would want to do something like this:

.row
{
   margin-left: -5px;
   margin-right: -5px;
}

.column
{
   float: left;
   padding-left: 2.5px;
   padding-right: 2.5px;
}

.column.three
{
    width: 33.333%
}

Now you can do something like this:

<div class="row">
    <div class="column three">
      Content
    </div>
    <div class="column three">
      Content
    </div>
    <div class="column three">
      Content
    </div>
</div>

With pretty results. Since your tables are your columns, you can not use padding like this. For this instance, i did this:

.table.tablas50
{
  width:calc( 50% - 5px );
}

With this calculation you get rid of the margin left and right for the first and last element.

I deleted the media querys, you will have to addapt that code into them.