首页文章资源工具教程 栏目
Bootstrap 4 基础教程Bootstrap 4 安装Bootstrap 4 基本框架Bootstrap 4 网格系统Bootstrap 4 文字排版Bootstrap 4 文本颜色Bootstrap 4 背景颜色Bootstrap 4 表格Bootstrap4 图像效果Bootstrap 4 超大屏幕 ( Jumbotron )Bootstrap 4 信息提示框Bootstrap 4 按钮Bootstrap 4 按钮组Bootstrap4 徽章 ( Badges )Bootstrap4 进度条Bootstrap 4 分页Bootstrap 4 面包屑导航Bootstrap 4 列表组Bootstrap 4 卡片组件Bootstrap 4 下拉菜单Bootstrap 4 折叠组件Bootstrap 4 手风琴Bootstrap 4 导航组件Bootstrap 4 导航栏Bootstrap 4 选项卡组件Bootstrap 4 胶囊导航组件Bootstrap 4 表单Bootstrap 4 表单控件Bootstrap4 轮播组件Bootstrap 4 模态框Bootstrap 4 提示框Bootstrap 4 弹出框Bootstrap 4 自动更新导航插件Bootstrap 4 小工具

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

Bootstrap 4 表格

Bootstrap 重制了表格 ( table ) 的样式


基础表格


.table 类可以设置基础表格的样式

<table class="table">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>


条纹表格


添加 .table-striped css 类，表格就会有条纹效果

<table class="table table-striped">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>


带边框表格


.table-bordered CSS 类可以为表格添加边框

<table class="table table-bordered">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>


表格鼠标悬停效果 (灰色背景)


.table-hover CSS 类可以为表格的每一行添加鼠标悬停效果 ( 灰色背景 )

<table class="table table-hover">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>


表格黑色背景


.table-dark CSS 类可以为表格添加黑色背景

<table class="table table-dark">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>


黑色条纹表格


同时添加 .table-dark 和 .table-striped CSS 类可以创建黑色的条纹表格

<table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>


鼠标悬停效果 - 黑色背景表格


同时使用 .table-dark 和 .table-hover CSS 类可以设置黑色背景表格的鼠标悬停效果

<table class="table table-dark table-hover">
<thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>


指定意义的颜色类


可以给 <tr> 或 <td> 添加 table-* 为每一行或每个单元格设置颜色

<table class="table">
<thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>      
      <tr class="table-primary">
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr class="table-success">
        <td>王</td>
        <td>安石</td>
        <td>北宋</td>
      </tr>
      <tr class="table-danger">
        <td>欧阳</td>
        <td>修</td>
        <td>北宋</td>
      </tr>
      <tr class="table-info">
        <td>司马</td>
        <td>迁</td>
        <td>西汉</td>
      </tr>
      <tr class="table-warning">
        <td>杨</td>
        <td>修</td>
        <td>曹魏</td>
      </tr>
      <tr class="table-active">
        <td>曹</td>
        <td>操</td>
        <td>曹魏</td>
      </tr>
      <tr class="table-secondary">
        <td>曹</td>
        <td>植</td>
        <td>曹魏</td>
      </tr>
      <tr class="table-light">
        <td>施</td>
        <td>耐庵</td>
        <td>元</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>苏</td>
        <td>轼</td>
        <td>北宋</td>
      </tr>
    </tbody>
</table>


可用于设置颜色的 CSS 类

下表列出了表格颜色类的说明

类名描述
.table-primary蓝色: 指定这是一个重要的操作
.table-success绿色: 指定这是一个允许执行的操作
.table-danger红色: 指定这是可以危险的操作
.table-info浅蓝色: 表示内容已变更
.table-warning橘色: 表示需要注意的操作
.table-active灰色: 用于鼠标悬停效果
.table-secondary灰色: 表示内容不怎么重要
.table-light浅灰色，可以是表格行的背景
.table-dark深灰色，可以是表格行的背景

表头颜色


.thead-dark CSS 类用于给表头添加黑色背景

.thead-light CSS 类用于给表头添加灰色背景

<table class="table">
    <thead class="thead-dark">
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <thead class="thead-light">
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>


紧凑的表格


.table-sm CSS 类用于通过减少内边距来设置紧凑的表格

<table class="table table-bordered table-sm">
<thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>


响应式表格

.table-responsive CSS 类用于创建响应式表格

响应式表格的规则如下

  1. 在屏幕宽度小于 992px 时会创建水平滚动条
  2. 如果可视区域宽度大于 992px 则没有滚动条
<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>


屏幕宽度

可以通过以下类设定在指定屏幕宽度下显示滚动条

类名屏幕宽度
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px
<div class="table-responsive-sm">
<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>

链接: https://fly63.com/course/19_949

Bootstrap4 图像效果 >>