如何设置table row的max-width？CSS样式不生效问题求助

tr元素默认的display属性是table-row，这类表格布局元素不支持max-width和margin属性，这就是你设置的样式在浏览器检查面板中不显示的原因。而tr的padding虽然能被识别，但不会影响行的整体宽度——表格行的宽度由表格本身和列的宽度共同决定，tr的padding无法改变这个规则。

正确的解决方案 #

方案1：给table设置样式（推荐）

表格本身是块级元素，支持max-width、margin等属性，同时用单元格（td/th）的padding替代tr的padding，既能实现需求又不破坏表格布局：

table {
  max-width: 1580px;
  margin-left: auto;
  margin-right: auto;
}
table td, table th {
  padding-left: 50px;
  padding-right: 50px;
}

方案2：修改tr的display属性（慎用）

如果必须单独控制tr的宽度，可以将tr的display改为block，但这会破坏表格的列对齐逻辑，因为tr不再参与表格布局，变成独立的块级元素：

table tr {
  display: block;
  max-width: 1580px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 50px;
  padding-right: 50px;
}

注意：这种方法会让表格的列不再对齐，仅适合不需要列对齐的特殊场景。

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