Bootstrap创建无边框表格

103次阅读
没有评论

在 Bootstrap中,可以通过为表格添加 .table-borderless 类来创建无边框表格。这将移除表格的所有边框,包括单元格和表头。

以下是一个示例代码,演示如何创建一个无边框表格:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>无边框表格</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  </head>
  <body>
    <table class="table table-borderless">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

在上面的示例中,我们为表格添加了 .table-borderless 类,并创建了一个基本的表格,其中包含表头和三行数据。您可以在样式表中修改表格的外观以满足您的需求。

正文完
 
评论(没有评论)