CSS表格布局：固定不起作用？

Question

我最初的擔心是：表從div容器中流出。 我一直在研究如何解決它，並最終使用固定的表布局（ 如何防止HTML表變得太寬 ）以及這種擔憂。

這個問題可能被標記為重復，但是這些問題與我的不同： 固定的表格布局未填充指定的表格寬度 ， 固定的表格布局 不起作用

包含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>

• 我還嘗試了max-width：100％有無重要！，在html表中設置width =“ 100％”。

表格行不適合表格，某些行比另一行長。 該圖像應該能夠清楚地描述我的問題。

Answer 1

該問題很可能是由於每行<td>的數量不匹配導致的，您可以嘗試將最后一位<td colspan="6"></td>更改為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

您需要使列數匹配： http : //jsfiddle.net/5bcL5csu/

將colspan增加到7：

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