单选按钮网格布局实现单元格顶部对齐与首列宽度收窄

两个问题的成因和对应修改方法如下：

收窄第一列、减少多余水平间距 #

• 原代码grid-template-columns: auto 1fr的auto值会让第一列自动分配可用空间，改成fit-content(200px)即可让第一列宽度完全贴合label文本内容，不会被无故拉伸，括号里的200px是第一列最大宽度阈值，可根据最长菜单项文本长度自行调整。
• 原代码统一设置grid-gap: 20px会让行列间距都是20px，可拆分为row-gap和column-gap单独设置，按需调小列间距数值即可减少左右两列的空隙。
• 原代码给table设置的grid-row: 1 / 5只让表格跨前4行，和实际5个菜单项的行数量不匹配，改成grid-row: 1 / -1让表格自动跨所有网格行，避免第一列产生多余空白。
• 额外修复：原代码选中表格时设置display: block会破坏原生表格的列宽计算逻辑，改成display: table，再加width: 100%让表格占满第二列宽度，避免布局错乱。

表格td单元格顶部对齐 #

align-items是Flex、Grid布局容器的专属属性，对原生table单元格不生效。控制table单元格垂直对齐需要用vertical-align属性，给所有td设置vertical-align: top即可实现顶部对齐。

修正后完整CSS代码 #

.table {
  background-color: white;
  padding-top: 100px;
  padding-bottom: 100px;
  box-sizing: border-box;
}

/* 隐藏单选按钮和未选中状态的表格 */
.container > input,
.container > table {
  display: none;
}

/* 显示选中菜单项对应的表格 */
.container > input:checked + label + table {
  display: table;
}

.container {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
  row-gap: 12px;
  column-gap: 16px;
  margin-left: 33.33%;
  margin-right: 33.33%;
  padding: 40px;
  font-size: 1vw;
  background-color: white;
  border: solid 8px black;
  box-sizing: border-box;
  align-self: stretch;
}

.container label {
  grid-column: 1 / 2;
  text-align: right;
}

.container > table {
  grid-column: 2 / -1;
  grid-row: 1 / -1;
  text-align: left;
  width: 100%;
  border-collapse: collapse;
}

.container td {
  vertical-align: top;
  padding: 8px 4px;
}

.container > table a{
  text-decoration: none;
  color: black;
}

.container label:visited {
  text-decoration: none;
}

.container label:hover {
  text-decoration: underline;
}

.container>input:checked+label {
  font-weight: 700;
}

HTML部分无需修改，直接替换原有CSS即可生效。如果需要进一步调整间距，直接修改column-gap和td的padding值即可。

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