本文旨在解决CSS表格布局中，特定表格的宽度设置无法生效的问题。通过分析问题原因，提供使用max-width、min-width以及text-overflow: ellipsis等CSS属性的解决方案，并提供详细的代码示例和注意事项，帮助开发者有效控制表格列宽，提升用户体验。
在网页开发中，表格（<table>）是一种常用的数据展示方式。然而，在实际应用中，我们可能会遇到一些问题，例如，尝试使用CSS设置表格单元格（<td>）的宽度时，发现某些表格的宽度设置无法生效。本文将深入探讨这个问题，并提供有效的解决方案。
从提供的代码和描述来看，问题主要集中在右侧的表格上，其<td>的宽度设置似乎不起作用。一个关键的原因在于<th>（表头）元素对列宽的潜在影响。
原因解释：
立即学习“前端免费学习笔记（深入）”；
表格的列宽通常由该列中最宽的单元格内容决定。如果<th>中的内容宽度超过了你尝试设置的<td>宽度，那么<th>的宽度将会“推翻”<td>的宽度设置。
以下是一些解决此问题的有效方法：
我们可以使用 max-width 属性来限制 <th> 元素的最大宽度。这可以防止 <th> 的内容过度扩展列宽，从而允许 <td> 的宽度设置生效。
table.produtos_vendidos table th {
height: 120px;
text-align: center;
max-width: 50px; /* 设置最大宽度 */
}与 max-width 相对，min-width 属性可以确保 <td> 元素至少具有指定的宽度。即使 <th> 的内容较宽，<td> 也能保持最小宽度。
table.produtos_vendidos table tr.prod td {
text-align: center;
width: 250px; /* 原始宽度设置 */
min-width: 80px; /* 设置最小宽度 */
}当 <th> 中的文本内容超过指定的宽度时，可以使用 text-overflow: ellipsis 属性来添加省略号，从而提高可读性，避免破坏布局。
.prod {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 添加省略号 */
max-width: 50px; /* 设置最大宽度 */
}代码解释：
如果需要对表格中的不同列设置不同的宽度，可以为每个列的 <th> 和 <td> 元素添加特定的 class，然后使用 CSS 单独设置它们的宽度。
<table>
<thead>
<tr>
<th class="col-1">Column 1</th>
<th class="col-2">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-1">Data 1</td>
<td class="col-2">Data 2</td>
</tr>
</tbody>
</table>.col-1 {
width: 150px;
}
.col-2 {
width: 200px;
}table.produtos_vendidos table {
border-collapse: collapse;
border-right: 1px solid #ccc;
}
table.produtos_vendidos table th {
height: 120px;
text-align: center;
max-width: 50px; /* 限制表头最大宽度 */
}
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;
}
div.rolante {
width: 500px;
overflow-x: scroll;
}
table.produtos_vendidos table tr.prod td {
text-align: center;
width: 250px;
}
.prod {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<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></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></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></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>通过本文的介绍，你应该能够理解为什么在某些情况下 CSS 表格宽度设置无法生效，并掌握多种有效的解决方案。在实际开发中，需要根据具体情况选择合适的策略，并注意各种潜在的问题，才能创建出美观、易用的表格布局。
以上就是CSS表格宽度设置疑难：右侧表格宽度无法生效的解决方案的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
368
收藏
