本文旨在解决HTML表格中特定单元格（TD）宽度（width）属性无法生效的问题，尤其是在表格嵌套或存在滚动容器的情况下。我们将探讨问题产生的原因，并提供详细的解决方案，包括CSS样式的调整和优化，确保表格布局的正确显示。
在HTML表格布局中，有时会遇到单元格（<td>）的宽度（width）属性设置失效的情况，尤其是在复杂的表格结构中，例如嵌套表格或者表格位于一个具有滚动条的<div>容器内。 这个问题通常是由于CSS样式的冲突或者表格自身的渲染机制导致的。
问题分析
从提供的代码来看，问题的关键在于右侧的表格，它嵌套在一个具有滚动条的<div>容器（.rolante）内。 尽管在<td>元素上设置了width属性，但这些宽度并没有生效。
原因主要有以下几点：
立即学习“前端免费学习笔记（深入）”；
- <th>元素的宽度影响： 表格的列宽很大程度上取决于表头单元格（<th>）的宽度。如果<th>元素的宽度小于你想要设置的<td>元素的宽度，那么<td>元素的宽度可能会受到限制。
- overflow-x: scroll的影响： 当<div>容器设置了overflow-x: scroll时，表格的宽度可能会受到容器宽度的限制。如果表格内容超出容器宽度，将会出现滚动条，但单元格的宽度可能仍然无法达到预期的值。
- CSS优先级问题： 可能存在其他CSS规则覆盖了你设置的width属性。
解决方案
以下是一些解决此问题的策略：
1. 调整<th>元素的宽度
确保<th>元素的宽度足够容纳<td>元素的内容，并且满足你期望的列宽。 可以通过以下方式设置<th>元素的宽度：
- 内联样式： 直接在<th>元素中使用style属性设置width。
- CSS样式： 使用CSS选择器来设置<th>元素的width。
table.produtos_vendidos table th.prod {
max-width: 350px; /* 限制最大宽度 */
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 使用省略号 */
}2. 设置<td>元素的最小宽度
使用min-width属性可以确保<td>元素至少具有指定的宽度。 这可以防止单元格宽度被压缩到小于预期值。
table.produtos_vendidos table td {
min-width: 80px; /* 设置最小宽度 */
}3. 调整<div>容器的宽度
确保<div>容器（.rolante）的宽度足够容纳表格的所有列。 如果容器宽度太小，表格可能会被压缩。
div.rolante {
width: 100%; /* 或者设置为更大的固定值，例如 800px */
overflow-x: auto; /* 使用 auto，根据内容自动显示滚动条 */
}4. 使用table-layout: fixed
table-layout: fixed属性可以使表格的列宽更加可预测。 它会根据第一行单元格的宽度来确定后续行的列宽。
table.produtos_vendidos table {
table-layout: fixed;
width: 100%; /* 需要设置表格的宽度 */
}5. 结合使用max-width和min-width
在<th>元素上使用max-width限制最大宽度，并在<td>元素上使用min-width确保最小宽度，可以更灵活地控制列宽。
table.produtos_vendidos table th {
max-width: 150px; /* 限制表头最大宽度 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table.produtos_vendidos table td {
min-width: 80px; /* 确保单元格最小宽度 */
}示例代码
以下是一个结合了上述一些策略的示例：
<style>
table.produtos_vendidos table {
border-collapse: collapse;
border-right: 1px solid #ccc;
table-layout: fixed; /* 关键：固定表格布局 */
width: 100%; /* 设置表格宽度 */
}
table.produtos_vendidos table th {
height: 120px;
text-align: center;
max-width: 200px; /* 限制表头最大宽度 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table.produtos_vendidos table th,
table.produtos_vendidos table td {
padding: 5px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
table.produtos_vendidos table tr td {
height: 50px;
min-width: 100px; /* 确保单元格最小宽度 */
}
div.rolante {
width: 600px; /* 调整容器宽度 */
overflow-x: auto; /* 使用 auto */
}
table.produtos_vendidos table tr.prod td {
text-align: center;
}
</style>
<table class="produtos_vendidos">
<tbody>
<tr style="vertical-align: top;">
<td>
<table>
<tbody>
<tr>
<th style="width: 300px;">PEDIDO</th>
<th style="width: 80px;">CX</th>
<th style="width: 80px;">CUSTO UNITÁRIO</th>
<th style="width: 80px;">CUSTO DA CAIXA</th>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO ROLO PRETO 15L 60UN</td>
<td style="width: 80px; text-align: center;">20</td>
<td style="width: 80px; text-align: right;">R$ 9.48</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO ROLO PRETO 30L 40UN</td>
<td style="width: 80px; text-align: center;">20</td>
<td style="width: 80px; text-align: right;">R$ 9.48</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO ROLO PRETO 50L 30UN</td>
<td style="width: 80px; text-align: center;">20</td>
<td style="width: 80px; text-align: right;">R$ 9.48</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO ROLO PRETO 100L 18UN</td>
<td style="width: 80px; text-align: center;">20</td>
<td style="width: 80px; text-align: right;">R$ 9.48</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO SUPER REFORÇADO 50L 10UN</td>
<td style="width: 80px; text-align: center;">50</td>
<td style="width: 80px; text-align: right;">R$ 3.79</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO SUPER REFORÇADO 100L 10UN</td>
<td style="width: 80px; text-align: center;">25</td>
<td style="width: 80px; text-align: right;">R$ 7.58</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO SUPER REFORÇADO 200L 10UN</td>
<td style="width: 80px; text-align: center;">25</td>
<td style="width: 80px; text-align: right;">R$ 7.58</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO ALMOFADA 100L</td>
<td style="width: 80px; text-align: center;">50</td>
<td style="width: 80px; text-align: right;">R$ 3.79</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO ALMOFADA 50L </td>
<td style="width: 80px; text-align: center;">50</td>
<td style="width: 80px; text-align: right;">R$ 3.79</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO ALMOFADA 30L </td>
<td style="width: 80px; text-align: center;">50</td>
<td style="width: 80px; text-align: right;">R$ 3.79</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO POTENZZO ALMOFADA 15L </td>
<td style="width: 80px; text-align: center;">50</td>
<td style="width: 80px; text-align: right;">R$ 3.79</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td style="width: 300px;">SACO LIXO EMBALANDO LIXO 34X38CM PIA BANHEIRO</td>
<td style="width: 80px; text-align: center;">25</td>
<td style="width: 80px; text-align: right;">R$ 7.58</td>
<td style="width: 80px; text-align: right;">R$ 189.60</td>
</tr>
<tr>
<td colspan="4" style="text-align: right;">Totais => </td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="rolante">
<table>
<tbody>
<tr>
<th class="prod">LINHARES & CIA LTDA </th>
<th class="prod">SUPERMERCADO SAN MARTINS EIRELI </th>
<th class="prod">NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
<th class="prod">CONFIAR SUPERMERCADOS LTDA</th>
<th class="prod">CONFIAR SUPERMERCADOS LTDA</th>
<th class="prod">JAIRO BRAZ DE SOUZA & CIA LTDA </th>
<th class="prod">MERCADO E AÇOUGUE FARIA LTDA </th>
<th class="prod">ESCOBAR GOMES DE SOUZA FILHO (BARRA) </th>
<th class="prod">SUPERMERCADO MODELO CENTRAL LTDA </th>
<th class="prod">SUPERMERCADO PAIS & FILHOS RIOBRANQUENSE LTDA </th>
<th class="prod">SUPERMERCADO LIMA E SOUZA LTDA </th>
<th class="prod">NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
<th class="prod">TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
<th class="prod">2M COMÉRCIO ALIMENTÍCIO LTDA </th>
<th class="prod">BAZINHO E FILHOS SUPERMERCADOS LTDA (SANTANA) </th>
<th class="prod">TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
<th class="prod">BACUTIA COMERCIAL LTDA </th>
<th class="prod">MERCEARIA SILVEIRA EUGENÓPOLIS LTDA/CNPJ </th>
<th>Totais</th>
</tr>
<tr class="prod">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td></td>
<td>1</td>
<td>3</td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td>2</td>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>14</td>
</tr>
<tr class="prod">
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td></td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td>1</td>
<td>1</td>
<td>23</td>
</tr>
<tr class="prod">
<td>1</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>5</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td></td>
<td>2</td>
<td>2</td>
<td></td>
<td>1</td>
<td>1</td>
<td>32</td>
</tr>
<tr class="prod">
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>3</td>
<td>5</td>
<td>3</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td></td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>33</td>
</tr>
<tr class="prod">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td>2</td>
</tr>
<tr class="prod">
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>1</td>
<td>9</td>
</tr>
<tr class="prod">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td>2</td>
</tr>
<tr class="prod">
<td>1</td>
<td>1</td>
<td>2</td>
<td></td>
<td>1</td>
<td></td>
<td>1</td>
<td></td>
<td>2</td>
<td></td>
<td>1</td>
<td></td>
<td>3</td>
<td></td>
<td></td>
<td>2</td>
<td></td>
<td>1</td>
<td>15</td>
</tr>
<tr class="prod">
<td>1</td>
<td>1</td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td></td>
<td>2</td>
<td></td>
<td>1</td>
<td>1</td>
<td>2</td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>1</td>
<td>14</td>
</tr>
<tr class="prod">
<td></td>
<td>1</td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>1</td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>5</td>
</tr>
<tr class="prod">
<td></td>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>6</td>
</tr>
<tr class="prod">
<td></td>
<td></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>4</td>
</tr>
<tr class="prod">
<td>6</td>
<td>8</td>
<td>14</td>
<td>11</td>
<td>8</td>
<td>7</td>
<td>16</td>
<td>13</td>
<td>14</td>
<td>6</td>
<td>5</td>
<td>11</td>
<td>7</td>
<td>9</td>
<td>3</td>
<td>8</td>
<td>4</td>
<td>9</td>
<td>159</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>关键点：
- 设置table-layout: fixed可以更好地控制列宽。
- 调整.rolante的宽度以适应表格内容。
- 使用max-width和min-width来灵活控制表头和单元格的宽度。
- 使用overflow-x: auto 可以让滚动条只在必要时出现。
注意事项
- 在复杂的表格布局中，可能需要尝试不同的CSS属性组合才能达到最佳效果。
- 确保你的CSS规则具有足够的优先级，以覆盖其他可能冲突的样式。
- 使用浏览器的开发者工具来检查元素的实际宽度和应用的CSS规则，这有助于诊断问题。
总结
解决HTML表格单元格宽度无法生效的问题，需要综合考虑<th>元素的宽度、<div>容器的宽度、CSS优先级以及table-layout属性。 通过调整这些因素，可以确保表格按照预期的方式显示。 记住，使用浏览器的开发者工具进行调试是解决此类问题的关键步骤。
