CSS table-layout：修复不起作用？

Question

我最初担心的是：桌子正在流出div容器。我已经搜索过如何解决它并最终使用固定的表格布局（How to prevent HTML tables from becoming too wide）以及此问题。

这个问题可能标记为重复，但这些问题与我的不同：Fixed table layout not filling specified table width， table-layout fixed not working

包含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％有和没有重要！，设置宽度=＆＃34; 100％＆＃34;在html表中。

表格行不适合表格，有些行比另一行长。图像应该能够清楚地描述我的问题。

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>