css table合并单元格

作者：顺我者未必能活发布日期:2025-12-09 浏览:103

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h2>CSS Table 合并单元格示例</h2>

<table>
    <tr>
        <th colspan="2">合并的表头</th> <!-- 使用colspan属性合并两个水平方向的单元格 -->
        <th>普通表头</th>
    </tr>
    <tr>
        <td rowspan="2">合并的单元格</td> <!-- 使用rowspan属性合并两个垂直方向的单元格 -->
        <td>数据1</td>
        <td>数据2</td>
    </tr>
    <tr>
        <td>数据3</td>
        <td>数据4</td>
    </tr>
</table>

</body>
</html>

解释说明：

colspan 属性用于指定单元格应跨越的列数。在示例中，第一行的第一个 <th> 元素使用了 colspan="2"，表示该单元格将占据两列。
rowspan 属性用于指定单元格应跨越的行数。在示例中，第二行的第一个 <td> 元素使用了 rowspan="2"，表示该单元格将占据两行。

通过这些属性，可以轻松实现表格中单元格的合并效果。

上一篇：css hidden

下一篇：css文字不换行省略号