Box-sizing diffs

by jamesdh

HTML

<div id="column">
    <div class="row">Div1</div>
    <div class="row">Div2</div>
    <div class="row">Div3</div>
    <div class="row">Div4</div>
</div>

<table id="defaults" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>T1C1</td>
</tr>
<tr>
<td>T1C2</td>
</tr>
<tr>
<td>T1C3</td>
</tr>
<tr>
<td>T1C4</td>
</tr>
</tbody>
</table>

<table id="first" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>T2C1</td>
</tr>
<tr>
<td>T2C2</td>
</tr>
<tr>
<td>T2C3</td>
</tr>
<tr>
<td>T2C4</td>
</tr>
</tbody>
</table>

<table id="second" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>T3C1</td>
</tr>
<tr>
<td>T3C2</td>
</tr>
<tr>
<td>T3C3</td>
</tr>
<tr>
<td>T3C4</td>
</tr>
</tbody>
</table>

<table id="third" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>T4C1</td>
</tr>
<tr>
<td>T4C2</td>
</tr>
<tr>
<td>T4C3</td>
</tr>
<tr>
<td>T4C4</td>
</tr>
</tbody>
</table>

CSS

* {
padding: 0;
margin: 0;
font: 15px arial, sans-serif;
line-height: 1;
}

#column {
   display: break; 
   float: left;
}

#column div {
    display: inline-break;
    height: 35px;
    border: 5px solid #000;   
}

table {
border-collapse: collapse;
border-spacing: 0;
float: left;
margin-left: 5px;
}

table tbody tr td {
height: 35px;
border: 5px solid #000;   
}

table#first tbody tr td { 
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
} 

table#second tbody tr td { 
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
} 

table#third tbody tr td { 
box-sizing: padding-box;
-moz-box-sizing: padding-box;
}