如何单独调整HTML表格第二列宽度以适配大段文本？

你需要修改CSS代码新增以下规则即可实现需求：

1. 给table元素添加table-layout: fixed属性，固定表格布局规则，避免浏览器根据内容多寡自动分配列宽
2. 使用:nth-child(2)选择器匹配第二列的表头和单元格，单独设置宽度

完整修改后的CSS代码 #

table {
  padding: 0;
  /* 新增以下两行，也可保留你原有html内联的width:100% */
  width: 100%;
  table-layout: fixed;
}

table tr {
  border-top: 1px solid #cccccc;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
}
table tr:nth-child(2n) {
  background-color: #f8f8f8;
}
table tr th {
  font-weight: bold;
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 0.375rem 0.8125rem;
}

table tr td {
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 0.375rem 0.8125rem;
}
table tr th :first-child,
table tr td :first-child {
  margin-top: 0;
}
table tr th :last-child,
table tr td :last-child {
  margin-bottom: 0;
}
/* 新增：单独设置第二列宽度 */
table tr th:nth-child(2),
table tr td:nth-child(2) {
  width: 50%; /* 可根据需求调整比例，也可设置固定像素值如600px */
  word-wrap: break-word; /* 长文本自动换行，避免溢出单元格 */
}

可选灵活方案 #

如果后续可能调整列顺序，建议使用自定义类名控制宽度，避免:nth-child匹配错位：

1. 给第二列的表头和所有对应单元格添加类名：

<th class="long-content-col">Lorem ipsum 2</th>
<td class="long-content-col">长文本内容...</td>

2. 替换上面新增的第二列样式为：

.long-content-col {
  width: 50%;
  word-wrap: break-word;
}

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