Css Table-layout: Fixed Not Working?

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 becomin

Solution 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-containertable {
    border-collapse: collapse;
    border: solid 1px#000;
    table-layout: fixed;
    word-wrap:break-word;
    width: 100%;
}
.cardio-form-containertabletd {
    border: solid 1px#000;
}

<divclass="cardio-form-container"><table><tr><td>Contact #</td><td>TextBoxTextBoxTextBoxTextBoxTextBoxTextBoxTextBox</td><td>Locality</td><td>TextBox</td><td>FILE #</td><td>TextBox</td><tdcolspan="2">TextBox</td><td>TAPE #</td><td>TextBox</td><tdcolspan="2">TextBox</td></tr><tr><td>Referring MD</td><td>TB</td><td>Weight</td><td>TB</td><td>Sonographer</td><tdcolspan="7"></td></tr></table></div>

Solution 2:

You need to have your column counts match: http://jsfiddle.net/5bcL5csu/

Increase your colspan to 7:

<tdcolspan="7">asdf</td>