我有一个宽度设置为100%的表格,我想要给每一列设置不同的宽度。然而,所有的列似乎都具有相同的宽度。
.table {
table-layout: fixed;
width: 100%;
}
.table th[colspan=4] {
/* width: 100%; */
}
.table td,
th {
border: 1px solid #AAA;
text-align: center;
}
.table td.one {
width: 10%;
}
.table td.two {
width: 20%;
}
.table td.three {
width: 50%;
}
.table td.four {
width: 20%;
}
<table class="table">
<tbody>
<tr>
<th colspan="4">All Four</th>
</tr>
<tr>
<th colspan="4">All Four</th>
</tr>
<tr>
<td class="one">A</td>
<td class="two">B</td>
<td class="three">C</td>
<td class="four">D</td>
</tr>
</tbody>
</table>
table-layout: auto
,那么它也可以正常工作。但是,如果我有一行跨越多个列作为第一行,我就无法使宽度达到我想要的效果。