前端学习-UI框架学习-Bootstrap5-006-表格

菜鸟教程链接

基础表格

<template>

  <div class="container mt-3">
    <h2>基础表格</h2>
    <p>.table 类来设置基础表格的样式:</p>            
    <table class="table">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>
  </div>

</template>

条纹表格.table-striped

<table class="table table-striped"></table>

带边框表格table-bordered

<table class="table table-bordered"></table>

鼠标悬停状态表格table-hover

<table class="table table-hover"></table>

黑色背景表格

<table class="table table-dark"></table>

黑色背景条纹表格

<table class="table table-dark table-striped"></table>

无边框表格

<table class="table table-borderless"></table></table>

给表格行或单元格添加底色

<template>

  <div class="container mt-3">
    <h2>基础表格</h2>
    <p>.table 类来设置基础表格的样式:</p>            
    <table class="table table-borderless">
      <thead>
        <tr class="table-secondary">
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td class="table-success">Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr class="table-danger">
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>
  </div>

</template>

表头颜色

设置表头的颜色，例如 .table-dark 类用于给表头添加黑色背景， .table-light 类用于给表头添加灰色背景:

<table class="table table-borderless">
      <thead class="table-dark">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
</table>

较小的表格

会比平常的稍微小一点

<table class="table table-sm"></table></table>

响应式表格

.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:

<template>
  <div class="container mt-3">
    <h2>响应式表格</h2>
    <p>.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:</p>                                                                                      
    <div class="table-responsive">          
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
          <th>City</th>
          <th>Country</th>
          <th>Sex</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
          <th>Example</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Anna</td>
          <td>Pitt</td>
          <td>35</td>
          <td>New York</td>
          <td>USA</td>
          <td>Female</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>

</template>