Bootstrap5合并表格单元格

114次阅读
没有评论

在Bootstrap5中,可以使用HTML表格的rowspan和colspan属性来合并单元格。

rowspan属性用于将单元格的行合并,colspan属性用于将单元格的列合并。

下面是一个例子,展示了如何将两个单元格合并成一个跨越两行的单元格:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 5 Table with rowspan and colspan</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
    <table class="table">
        <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td rowspan="2">Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td colspan="2">Row 2, Cell 2 and 3 merged</td>
        </tr>
        <tr>
            <td>Row 3, Cell 1</td>
            <td>Row 3, Cell 2</td>
            <td>Row 3, Cell 3</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

在上面的示例中,我们使用rowspan属性将第一行第一个单元格合并为一个跨越两行的单元格,使用colspan属性将第二行第二个和第三个单元格合并为一个跨越两列的单元格。

正文完
 
评论(没有评论)