HTML表格单元格宽度不一致：如何让NBA比分单元格等宽？

以下是几种实用的CSS解决方案，能快速让所有比分单元格宽度保持一致：

方法1：给比分单元格设置固定宽度 #

假设你的比分单元格使用了类名.score-cell，直接给该类设置固定宽度，同时避免内容换行撑宽：

.score-cell {
  width: 70px; /* 根据实际需求调整合适的像素值 */
  text-align: center; /* 让比分居中显示，提升视觉整齐度 */
  white-space: nowrap; /* 禁止内容换行，防止宽度被撑开 */
  box-sizing: border-box; /* 确保padding、border不会额外增加宽度 */
}

方法2：给表格启用固定布局模式 #

通过table-layout: fixed让表格优先遵循预设的列宽，而非自适应内容：

.nba-score-table {
  table-layout: fixed;
  width: 100%; /* 可设置固定宽度，比如800px */
}
.nba-score-table .score-cell {
  width: 12%; /* 按比例分配宽度，或直接写固定像素值 */
}

这种方式适合列数固定的表格，能彻底避免内容差异导致的宽度不均。

方法3：统一单元格内部元素样式 #

如果比分是嵌套在<span>或其他标签里，需确保内部元素样式一致：

.score-cell span {
  display: inline-block;
  width: 100%;
  text-align: center;
}

避免内部元素因内容长度不同，间接撑开单元格宽度。

额外注意事项 #

• 检查所有比分单元格的padding、border属性是否一致，这些属性也会影响实际宽度；
• 动态生成单元格时，确保每个比分单元格都正确应用了统一的类名，不要遗漏样式。

内容的提问来源于stack exchange，提问作者CollegeMonday