HTML中如何设置表格td单元格宽度 实现Pertemuan列1单元格与2-5尺寸一致

问题原因 #

你代码里「Pertemuan」所在的单元格默认只占1列，和下方5个序号（1-5）的列数不匹配，所以第1个序号的单元格会自动适配上层「Pertemuan」单元格的宽度，导致和后面2-5的宽度不一致。 #

解决方法 #

1. 给「Pertemuan」对应的<td>添加colspan="5"属性，让它横跨下方5个序号列
2. 可以给所有序号列的<td>设置统一固定宽度，或者给table添加table-layout: fixed属性强制列宽均分。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Table Danial Syah XI RPL 2</title>
</head>
<body>
    <table border="1" style="table-layout: fixed;">
        <tr>
            <td style="background-color:crimson" rowspan="2">No</td>
            <td style="background-color:deepskyblue" rowspan="2">Nama</td>
            <!-- 添加colspan=5实现跨5列效果 -->
            <td style="background-color:chartreuse;" colspan="5">Pertemuan</td>
        </tr>
        <tr>
            <!-- 所有序号列设置统一宽度 -->
            <td style="background-color:darkcyan; width: 60px;">1</td>
            <td style="background-color:darkcyan; width: 60px;">2</td>
            <td style="background-color:darkcyan; width: 60px;">3</td>
            <td style="background-color:darkcyan; width: 60px;">4</td>
            <td style="background-color:darkcyan; width: 60px;">5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Neymar</td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td>s</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Cristiano</td>
            <td>a</td>
            <td><span>&#10003;</span></td>
            <td>i</td>
            <td>s</td>
            <td><span>&#10003;</span></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bale</td>
            <td>a</td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
        </tr>
    </table>
</body>
</html>

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