Table column widths different for table with/without data - html

Question

I have found something unusual and was wondering if this is intentional behaviour and if there is a fix for this. I would ideally like to stay within bootstrap without having to specify specific widths.
I am using twitter bootstrap to format a table. However when there is a table with no data the column widths are different to a table with data, i.e. a body with rows.
I have created a jsFiddle to demo this. jsFiddle
Here is the html.
<div class="col-md-10 col-md-offset-1">
<div class="col-md-12 category-header"><span class="">Turbo</span></div>
<div class="col-md-12 no-padding">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th class="text-left col-md-1">Part No.</th>
<th class="text-left col-md-3">Description</th>
<th class="text-center col-md-3">Notes</th>
<th class="text-center col-md-2">Dates</th>
<th class="text-center col-md-1">Stock</th>
<th class="text-right col-md-1">RRP</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">ISTB10768R</td>
<td class="col-md-3">REMANUFACTURED TURBO</td>
<td title="" class="col-md-3 text-center"></td>
<td class="col-md-2 text-center"></td>
<td class="col-md-1 text-center">
<i title="" data-placement="top" data-toggle="tooltip" class="fa fa-check amber black-tooltip" data-original-title="Less than three units in stock"></i>
</td>
<td class="col-md-1 text-right">£370.00</td>
<td class="col-md-1 text-right">
<span data-part-number="ISTB10768R" data-part-id="564" href="#" class="glyphicon glyphicon-shopping-cart add-to-cart-btn pink " title="Add To Cart ">Add</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-12 category-header"><span class="">Gear Boxes</span></div>
<div class="col-md-12 no-padding">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th class="text-left col-md-1">Part No.</th>
<th class="text-left col-md-3">Description</th>
<th class="text-center col-md-3">Notes</th>
<th class="text-center col-md-2">Dates</th>
<th class="text-center col-md-1">Stock</th>
<th class="text-right col-md-1">RRP</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody/>
</table>
<div class="missing-parts">Please call the sales team for price and availability</div>
</div>
</div>
</div>

Answer 1

I am sorry but there is a problem in the code you provided(specifically in the second table), perhaps a typo. Which is causing the overflow.
Second table code you provided
<table class="table no-margin">
<thead>
<tr>
<th class="text-left col-md-1">Part No.</th>
<th class="text-left col-md-3">Description</th>
<th class="text-center col-md-3">Notes</th>
<th class="text-center col-md-2">Dates</th>
<th class="text-center col-md-1">Stock</th>
<th class="text-right col-md-1">RRP</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody/>
</table>
<div class="missing-parts">Please call the sales team for price and availability</div>
As you can see the <tbody/> is wrong. There is no starting <tbody> tag & the closing tag should be </tbody>. Also there the missing-parts in nowhere inside the table body. It is outside the table body and that's why the weird behavior.
I have provided the correct code below. Here is the updated Fiddle. Works fine now.
Corrected table code
<table class="table no-margin">
<thead>
<tr>
<th class="text-left col-md-1">Part No.</th>
<th class="text-left col-md-3">Description</th>
<th class="text-center col-md-3">Notes</th>
<th class="text-center col-md-2">Dates</th>
<th class="text-center col-md-1">Stock</th>
<th class="text-right col-md-1">RRP</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="missing-parts">Please call the sales team for price and availability</div>
</td>
</tr>
</tbody>
</table>
Very important thing to note here is that, even though you have not specified any number of data columns under the first <tr>, it automatically assigns the <td> values to its respective <th>s.
In other words. If you mention only one <td>, it will automatically become the data of the first header ie. "Part No.". Which also means the the width of the data takes the width of the header it corresponds to(just like the top table). Try adding another <td> inside the same table row, you will understand.