1. 首页
  2. 默认
  3. 正文

Bootstrap系列之表格（Tables）

2022年10月24日 160点热度 0人点赞 0条评论

使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。

1、示例

由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类.table添加到任何<table>，然后使用自定义样式或我们的各种包含的修饰类进行扩展。

使用最基本的表标记，下面是Bootstrap中基于.table的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片

你也可以用.table-dark将浅色文本在深色背景上的颜色反转。

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片

2、表头选项

与表和暗表类似，使用修饰符类. head-light或. head-dark使< head>s显示为浅灰色或深灰色。

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片

3、条纹行

使用.table-striped将斑马条纹添加到<tbody>中的任何表行。

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片

4、表格有边框

为表格和单元格的所有边添加.table- borderded边框。

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

5、表格无边框

为无边框的表添加.table-borderless。

<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片

.table-borderless也可以用于暗表。

<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片

6、Hoverable行

添加.table-hover以在<tbody>中的表行上启用悬停状态。

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片

7、小表

添加.table-sm，通过将单元格填充物切成两半，使表格更紧凑。

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片

8、上下文类

使用上下文类给表格行或单个单元格着色。

<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

效果如图：

图片

常规的表背景变量在暗表中是不可用的，但是，您可以使用文本或背景实用程序来实现类似的样式。

<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

效果如图：

图片

向辅助技术传递意义 使用颜色添加意义只提供视觉指示，不会向屏幕阅读器等辅助技术的用户传递该指示。确保由颜色表示的信息从内容本身(例如可见的文本)中是明显的，或者通过其他方式包含，例如用.sr-only类隐藏的附加文本。

通过使用.table-responsive{-sm|-md|-lg|-xl}对任何.table进行填充来创建响应式表，使表在每个最大宽度断点分别达到(但不包括)576px、768px、992px和1120px时水平滚动。

请注意，由于浏览器目前不支持范围上下文查询，我们通过使用更高精度的值来进行这些比较，以绕过最小和最大前缀以及带有小数宽度的视口的限制(例如，在高dpi设备的某些条件下可能会出现这种情况)。

9、Captions

<caption>的作用类似于表的标题。它帮助使用屏幕阅读器的用户找到一个表，了解它是关于什么的，并决定是否要阅读它。

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

效果如图：

图片

10、响应表

响应式表格允许轻松地水平滚动表格。通过用.table-responsive包装.table，让任何一个表跨所有视图端口响应。或者，通过使用.table-responsive{-sm|-md|-lg|-xl}来选择响应表达到的最大断点。

垂直剪切/截断 响应式表格利用了overflow-y: hidden，它可以删除任何超出表格底部或顶部边缘的内容。特别是，它可以切断下拉菜单和其他第三方小部件。

10.1、总响应

在每个断点上，对水平滚动的表使用.table-responsive。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

效果如图：

图片

10.2、断点特定

根据需要使用.table-responsive{-sm|-md|-lg|-xl}来创建响应表，直到特定的断点。从该断点开始并向上，表将正常运行，不会水平滚动。

在响应样式应用于特定视口宽度之前，这些表格可能会被破坏。

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

效果如图：

91840Bootstrap系列之表格（Tables）
标签：
最后更新：2022年10月24日

这个人很懒，什么都没留下

文章评论

Bootstrap 5入门指南 IDEA2022.3最新版永久激活教程（亲测有效） 转需！几百款中文永久版软件及安装方法（含百度云、天翼云下载） 50 万用户无人付费，Kite 停止开发！ 50w人白嫖！历经 8 年研发的 Python 代码补全神器 Kite 停止开发 有效的phpstorm正式版激活码，配合插件可永久破解！ 软件安装目录大全 Pycharm 2022 Pycharm激活码-PyCharm 2022.2.1中文版激活教程 （更新）Python编辑开发PyCharm pro 2022.2.4 for Mac 中文破解版下载（附激活码） Go语言爱好者周刊：第 170 期 — Gopher 图片集 GoLand 迎来五周年，同时发布 2022.3：有彩蛋 GoLand迎来五周年，2022.3发布 互联网摸鱼日报（2022-12-03） 《怪物猎人：崛起》即将登陆Xbox及PS平台
尚学堂百战程序员AI算法工程师就业班【learn】 CSS3阴影实现方法及技巧全解 Windows软件目录【更新至2021年07月】 优雅地处理Go错误真是一门学问啊！ 不用插件，一键切换cad图层！ 尤雨溪约你聊聊Vue.js 3.0 Beta 关于NodeJS工作原理的五个误解 煎鱼 Go Gin 系列一：Go 介绍与环境安装 phpStorm2021 激活码，1年有效期，日期到2022年08月10号 NodeJs要凉凉？说nodeJs他爸发布下一代Deno 干货 | 从零开始学 Java - Spring 集成 Memcached 缓存配置（二） Web3.0：一场“赛博资本主义”的谎言 [uniApp] wordpress小程序处理Rest Api做二级分类 百度网盘安装教程 PyCharm为什么这么牛？
标签聚合
xbox 表情包 linux tiktok 编程语言排行 游戏 goland 2022 机器学习 科技 农业 前端 二手车 caddy https 开发 网盘 idea 2022 激活 软件 芯片 python 世界杯 m3u8 web3
other

COPYRIGHT © 2022 编程网. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang