CSS table-layout: fixed not working? - html

Question

My original concern was: table are flowing out of the div container. I've searched on how to solve it and ended up using table-layout fixed (How to prevent HTML tables from becoming too wide) and with this concern.
This question maybe tagged duplicate but these questions are different from mine: Fixed table layout not filling specified table width,
table-layout fixed not working
class of the containing div
.cardio-form-container table {
border-collapse: collapse;
border: solid 1px #000;
table-layout: fixed;
word-wrap:break-word;
width: 100%;
}
.cardio-form-container table td {
border: solid 1px #000;
}
<div class="cardio-form-container"><table>.....
<tr>
<td>Contact #</td>
<td>TextBoxTextBoxTextBoxTextBoxTextBoxTextBoxTextBox</td>
<td>Locality</td>
<td>TextBox</td>
<td>FILE #</td>
<td>TextBox</td>
<td colspan="2">TextBox</td>
<td>TAPE #</td>
<td>TextBox</td>
<td colspan="2">TextBox</td>
</tr>
<tr>
<td>Referring MD</td>
<td>TB</td>
<td>Weight</td>
<td>TB</td>
<td>Sonographer</td>
<td colspan="6"></td>
I also tried max-width: 100% with and without important!, set width="100%" in the html table.
Table rows doesn't fit the table and some rows are longer than the other. The image should be able to clearly describe my question.

Answer 1

The issue is likely caused by the mismatched number of <td>s on each row, you could try changing the last bit <td colspan="6"></td> to 7.
.cardio-form-container table {
border-collapse: collapse;
border: solid 1px #000;
table-layout: fixed;
word-wrap:break-word;
width: 100%;
}
.cardio-form-container table td {
border: solid 1px #000;
}
<div class="cardio-form-container">
<table>
<tr>
<td>Contact #</td>
<td>TextBoxTextBoxTextBoxTextBoxTextBoxTextBoxTextBox</td>
<td>Locality</td>
<td>TextBox</td>
<td>FILE #</td>
<td>TextBox</td>
<td colspan="2">TextBox</td>
<td>TAPE #</td>
<td>TextBox</td>
<td colspan="2">TextBox</td>
</tr>
<tr>
<td>Referring MD</td>
<td>TB</td>
<td>Weight</td>
<td>TB</td>
<td>Sonographer</td>
<td colspan="7"></td>
</tr>
</table>
</div>

Answer 2

You need to have your column counts match:
http://jsfiddle.net/5bcL5csu/
Increase your colspan to 7:
<td colspan="7">asdf</td>