html - CSS 表格布局 : fixed not working?

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% 有和没有 important!，在 html 表中设置 width="100%"。

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

Answer 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>