CSS 表格布局：固定不工作？答案

【问题标题】：CSS table-layout: fixed not working?CSS 表格布局：固定不工作？
【发布时间】：2015-04-22 11:52:29
【问题描述】：

我最初担心的是：表格从 div 容器中流出。我已经搜索了如何解决它并最终使用了 table-layout fixed (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% with and without important!，在 html 表格中设置 width="100%"。

表格行不适合表格，并且某些行比其他行长。图片应该能够清楚地描述我的问题。

【问题讨论】：

请填写您的代码。目前，您在顶部中有 12 个，在底部中有 11 个。

标签： html css

【解决方案1】：

此问题可能是由于每行<td>s 的数量不匹配造成的，您可以尝试将最后一位<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>

【讨论】：

【解决方案2】：

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

将你的 colspan 增加到 7：

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

【讨论】：