我有一个表，需要其中的行具有特定的宽度。但是colspan和table布局：修复了我想要的样式。请注意，我可以NOT更改html代码中的任何内容，我也不能删除表布局：已修复我只想用css做什么吗？还是说，除非html被更改，否则这是无法完成的事情？
table {
table-layout: fixed;
width: 100%;
}
th,
td {
border: 1px solid black;
}
th:first-child,
td:first-child {
width: 5%;
background-color: lightblue;
}
td:nth-child(2),
tr:last-child th:nth-child(2) {
width: 70%;
background-color: lightpink;
}
td:nth-child(3),
th:nth-child(3) {
width: 10%;
background-color: lightgreen;
}
td:nth-child(4),
th:nth-child(4) {
width: 10%;
background-color: #a9a9a9;
}
td:last-child,
th:nth-child(5) {
width: 5%;
background-color: #d4d4d4;
}<table>
<thead>
<tr>
<th>1</th>
<th colspan="4">2</th>
</tr>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>这是我想要的的视觉效果
这是我得到的的视觉效果
表布局固定意味着表将使用第一行来定义其样式——因为第一行中有一个4的colspan，所以它不知道第二行中的列的宽度，因此将它们平均拆分。
从MDN关于表布局固定：
表和列的宽度由表和列元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。
为了绕过这一点，您可以定义一个colgroup，然后为这些列指定宽度，它们将应用于表的其余部分：
table {
table-layout: fixed;
width: 100%;
}
th,
td {
border: 1px solid black;
}
col:first-child {
width: 5%;
background-color: lightblue;
}
col:nth-child(2) {
width: 70%;
background-color: lightpink;
}
col:nth-child(3) {
width: 10%;
background-color: lightgreen;
}
col:nth-child(4) {
width: 10%;
background-color: #a9a9a9;
}
col:nth-child(5) {
width: 5%;
background-color: #d4d4d4;
}<table>
<colgroup>
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th class="col1">1</th>
<th colspan="4">2</th>
</tr>
<tr>
<th class="col1">a</th>
<th class="col2">b</th>
<th class="col3">c</th>
<th class="col4">d</th>
<th class="col5">e</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>如果您不能更改html，并且必须修复布局，那么您就不能对第二行的宽度采取任何措施。
使用纯css所能做的最好的事情就是删除固定的布局(你没有解释为什么需要这样做(，然后对tds:进行样式设置
table {
width: 100%;
}
th,
td {
border: 1px solid black;
}
td:first-child {
width: 5%;
background-color: lightblue;
}
td:nth-child(2) {
width: 70%;
background-color: lightpink;
}
td:nth-child(3) {
width: 10%;
background-color: lightgreen;
}
td:nth-child(4) {
width: 10%;
background-color: #a9a9a9;
}
td:nth-child(5) {
width: 5%;
background-color: #d4d4d4;
}<table>
<thead>
<tr>
<th>1</th>
<th colspan="4">2</th>
</tr>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>table-layout:fixed
当表和列宽由表和列的宽度或第一行单元格的宽度设置时应用。其他行中的单元格不会影响列宽-表布局属性的理解，因此需要表{表格布局：自动！重要的}
table {
table-layout: fixed;
width: 100%;
}
th,
td {
border: 1px solid black;
}
th:first-child,
td:first-child {
background-color: lightblue;
}
td:nth-child(2),
tr:last-child th:nth-child(2) {
background-color: lightpink;
}
td:nth-child(3),
th:nth-child(3) {
background-color: lightgreen;
}
td:nth-child(4),
th:nth-child(4) {
background-color: #a9a9a9;
}
td:last-child,
th:nth-child(5) {
background-color: #d4d4d4;
}<table>
<thead>
<tr>
<th>1</th>
<th colspan="6">2</th>
</tr>
<tr>
<th>a</th>
<th colspan="3">b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td colspan="3">b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td colspan="3">b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td colspan="3">b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>jsfiddle链接此处
/*I think this is the minimal way**/
table {
table-layout: fixed;
width: 100%;
}
th,
td {
border: 1px solid black;
}
.text-center{
text-align:center;
}<table>
<thead>
<tr class="text-center">
<th >1</th>
<th colspan="19">2</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td>a</td>
<td colspan="14">b</td>
<td colspan="2">c</td>
<td colspan="2">d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td colspan="14">b</td>
<td colspan="2">c</td>
<td colspan="2">d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td colspan="14">b</td>
<td colspan="2">c</td>
<td colspan="2">d</td>
<td>e</td>
</tr>
</tbody>