目录
1 强大的Bootstrap的表格
2 表格的颜色
3 表格的结构-表头、表尾、标题
4 响应式表格
5 表格边框
6 紧凑表格(小表格)
7 垂直对齐
8 水平对齐
9 嵌套
10 强调表格
10.1 条纹行
10.2 可悬停行
10.3 激活表
首页 web前端 Bootstrap教程 Bootstrap中怎么使用表格?强大表格的用法浅析

Bootstrap中怎么使用表格?强大表格的用法浅析

Nov 22, 2021 pm 07:45 PM
bootstrap 表格

本篇文章带大家一起了解一下Bootstrap中的表格插件的用法,介绍一下表格的颜色、表格的结构、响应式表格、表格边框等,希望对大家有所帮助!

Bootstrap中怎么使用表格?强大表格的用法浅析

1 强大的Bootstrap的表格

在html标签<table>加上基本类别 .table就可以使用Bootstrap的表格可选修饰类别或是自定义样式进行扩展。【相关推荐:《bootstrap教程》】

所有表格样式在Bootstrap中都不会继承,意味着嵌套表格的样式都是独立于父表格。

以下是使用最基本的表格排版在Bootstrap中的外观。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>表格演示</title>
  </head>
  <body>
        <div class="container">
            <h1>表格演示</h1>
            <table class="table">
                <thead>
                <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职业</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                <th>1</th>
                <td>张三</td>
                <td>男</td>
                <td>程序员</td>
                </tr>
                <tr>
                <th>2</th>
                <td>李四</td>
                <td>女</td>
                <td>美工</td>
                </tr>
                <tr>
                <th>3</th>
                <td>王五</td>
                <td colspan="2">我只会耍大刀</td>
                </tr>
                </tbody>
                </table>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
登录后复制

1.png

可以看到,默认的简单表格只是在table标签加了个class="table",就和普通的html表格外观上有了很大改观。

2 表格的颜色

使用语意化class给表格列或单元格上色。表哥颜色可以分别设置在&lt;table&gt;、<tr>、&lt;thead&gt;、<th>、<td>等一切表格元素中。如果是加在表格中,则在整个表格中有效,加在行中对整行有效,加在单元格中对整个单元格有效。

到目前为止好像没法加在整列中,要对整列使用某个颜色,只能将其中的所有单元格设置颜色。

&lt;!doctype html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;link href=&quot;bootstrap5/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;title&gt;表格演示&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;table class=&quot;table&quot;&gt;
                &lt;tr&gt;&lt;td&gt;Default&lt;/td&gt;&lt;/tr&gt;
                &lt;tr class=&quot;table-primary&quot;&gt;&lt;td&gt;table-primary&lt;/td&gt;&lt;/tr&gt;
                &lt;tr class=&quot;table-secondary&quot;&gt;&lt;td&gt;table-secondary&lt;/td&gt;&lt;/tr&gt;
                &lt;tr class=&quot;table-success&quot;&gt;&lt;td&gt;table-success&lt;/td&gt;&lt;/tr&gt;
                &lt;tr class=&quot;table-danger&quot;&gt;&lt;td&gt;table-danger&lt;/td&gt;&lt;/tr&gt;
                &lt;tr class=&quot;table-warning&quot;&gt;&lt;td&gt;table-warning&lt;/td&gt;&lt;/tr&gt;
                &lt;tr class=&quot;table-info&quot;&gt;&lt;td&gt;table-info&lt;/td&gt;&lt;/tr&gt;
                &lt;tr class=&quot;table-light&quot;&gt;&lt;td&gt;table-light&lt;/td&gt;&lt;/tr&gt;
                &lt;tr class=&quot;table-dark&quot;&gt;&lt;td&gt;table-dark&lt;/td&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td class=&quot;table-success&quot;&gt;table-success&lt;/td&gt;&lt;/tr&gt;
            &lt;/table&gt;
        &lt;/div&gt;
   
     &lt;script src=&quot;bootstrap5/bootstrap.bundle.min.js&quot; &gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
登录后复制

2.png

通过这个例子大家可以基本明白表格颜色的用法,需要主要的是对整个表格运用颜色是用&lt;table class=&quot;table table-secondary&quot;&gt;,不要省略前面的table, 虽然例子中最后一行也是table-success,但是事实上,最后一行是设置在单元格上的。

3 表格的结构-表头、表尾、标题

&lt;!doctype html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;link href=&quot;bootstrap5/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;title&gt;表格演示&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;table class=&quot;table caption-top&quot;&gt;
                &lt;caption class=&quot;text-center&quot;&gt;&lt;h3&gt;人员登记表&lt;/h5&gt;&lt;/caption&gt;
                &lt;thead&gt;
                &lt;tr&gt;
                &lt;th&gt;序号&lt;/th&gt;
                &lt;th&gt;姓名&lt;/th&gt;
                &lt;th&gt;性别&lt;/th&gt;
                &lt;th&gt;职业&lt;/th&gt;
                &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                &lt;tr&gt;
                &lt;th&gt;1&lt;/th&gt;
                &lt;td&gt;张三&lt;/td&gt;
                &lt;td&gt;男&lt;/td&gt;
                &lt;td&gt;警察&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                &lt;th&gt;2&lt;/th&gt;
                &lt;td&gt;李四&lt;/td&gt;
                &lt;td&gt;女&lt;/td&gt;
                &lt;td&gt;护士&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                &lt;th&gt;3&lt;/th&gt;
                &lt;td&gt;王五&lt;/td&gt;
                &lt;td&gt;男&lt;/td&gt;
                &lt;td&gt;教师&lt;/td&gt;
                &lt;/tr&gt;
                &lt;/tbody&gt;
                &lt;tfoot&gt;
                    &lt;th&gt;序号&lt;/th&gt;
                    &lt;td&gt;姓名&lt;/td&gt;
                    &lt;td&gt;性别&lt;/td&gt;
                    &lt;td&gt;职业&lt;/td&gt;
                &lt;/tfoot&gt;
                &lt;/table&gt;
        &lt;/div&gt;
   
     &lt;script src=&quot;bootstrap5/bootstrap.bundle.min.js&quot; &gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
登录后复制

显示效果

3.png

从上面的例子可以看出表格由下面几部分组成:

  • 表头thead:t是表格的简写head是头部
  • 表尾tfoot:t是表格foot是底部
  • 标题caption:只有一行,默认在表尾底部,演示中我通过在table中添加caption-top使他在上部。默认标题靠左对齐,我通过在caption中添加class="text-center"使文字居中。默认字体较小,我通过h3标题使他变大。
  • 行tr:一行,td标签必须写在tr中。
  • 列td:一个单元格,通过&lt;td colspan=&quot;2&quot;&gt;可以使两个相邻的单元格合并,里面的数字可以更改,但不能大于行中所有的列数。
  • 表头列th:与td唯一区别是里面文字粗体显示

通常为了美观,一般使用&lt;thead class=&quot;table-light&quot;&gt;&lt;thead class=&quot;table-dark&quot;&gt; 使&lt;thead&gt;显示为浅灰色或深灰色,其用法与11.2.1中的行的颜色一样,另外一般情况下表尾很少使用。

4.png

4 响应式表格

当表格一行的内容超过浏览器宽度的时候,默认浏览器会出现滚动条,这样存在的一个问题就是会把页面无线拉伸,严重影响网页中其他页面元素的显示效果。

而响应式表格是指把表格放在一个&lt;div class=&quot;table-responsive&quot;&gt; &lt;/div&gt;标签中,而该div标签是响应的,与容器同宽度,当表格宽度大于该div标签的时候,该div容器就会出现滚动条,而不是在浏览器上,这样就保证了表格不会超出页面宽度。

&lt;!doctype html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;link href=&quot;bootstrap5/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;title&gt;表格演示&lt;/title&gt;
    &lt;style&gt;
        td{white-space:nowrap;}
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;div class=&quot;table-responsive&quot;&gt;
            &lt;table class=&quot;table caption-top&quot;&gt;
                &lt;thead&gt;
                &lt;tr&gt;
                &lt;th&gt;表头1&lt;/th&gt;
                &lt;th&gt;表头2&lt;/th&gt;
                &lt;th&gt;表头3&lt;/th&gt;
                &lt;th&gt;表头4&lt;/th&gt;
                &lt;th&gt;表头5&lt;/th&gt;
                &lt;th&gt;表头6&lt;/th&gt;
                &lt;th&gt;表头7&lt;/th&gt;
                &lt;th&gt;表头8&lt;/th&gt;
                &lt;th&gt;表头9&lt;/th&gt;
                &lt;th&gt;表头10&lt;/th&gt;
                &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                &lt;tr&gt;
                &lt;td&gt;我是第1个单元格&lt;/td&gt;
                &lt;td&gt;我是第2个单元格&lt;/td&gt;
                &lt;td&gt;我是第3个单元格&lt;/td&gt;
                &lt;td&gt;我是第4个单元格&lt;/td&gt;
                &lt;td&gt;我是第5个单元格&lt;/td&gt;
                &lt;td&gt;我是第6个单元格&lt;/td&gt;
                &lt;td&gt;我是第7个单元格&lt;/td&gt;
                &lt;td&gt;我是第8个单元格&lt;/td&gt;
                &lt;td&gt;我是第9个单元格&lt;/td&gt;
                &lt;td&gt;我是第10个单元格&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/div&gt;
   &lt;/div&gt;
     &lt;script src=&quot;bootstrap5/bootstrap.bundle.min.js&quot; &gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
登录后复制

该代码的css部分是为了禁止文字换行,否则单元格会挤压成很多行。

5.png

在特点断点处响应

table-responsive{-sm|-md|-lg|-xl|-xxl}表示在断点前会出现滚动条,从该断点开始,表格将正常运行并且不会水平滚动。你可以把上面的代码中table-responsive换为table-responsive-md 查看一下效果,在此我就不演示了。

5 表格边框

默认表格是只有行边框的,你可以用table-bordered 为表格和单元格的所有边添加边框,还可以用可以添加边框颜色实用类来更改边框颜色(边框颜色通表格颜色,只不过把前缀table换成border)。

&lt;table class=&quot;table table-bordered border-primary&quot;&gt;
...
&lt;/table&gt;
登录后复制

你还可以table-borderless构造无框的表格。

&lt;table class=&quot;table table-borderless&quot;&gt;
...
&lt;/table&gt;
登录后复制

现在给出一个综合实例。

&lt;!doctype html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;link href=&quot;bootstrap5/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;title&gt;表格演示&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;table class=&quot;table caption-top table-bordered border-primary&quot;&gt;
                &lt;caption class=&quot;text-center&quot;&gt;&lt;h3&gt;带颜色边框表格&lt;/h5&gt;&lt;/caption&gt;
                &lt;thead&gt;
                &lt;tr&gt;
                &lt;th&gt;序号&lt;/th&gt;
                &lt;th&gt;姓名&lt;/th&gt;
                &lt;th&gt;性别&lt;/th&gt;
                &lt;th&gt;职业&lt;/th&gt;
                &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                &lt;tr&gt;
                &lt;th&gt;1&lt;/th&gt;
                &lt;td&gt;张三&lt;/td&gt;
                &lt;td&gt;男&lt;/td&gt;
                &lt;td&gt;警察&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                &lt;th&gt;2&lt;/th&gt;
                &lt;td&gt;李四&lt;/td&gt;
                &lt;td&gt;女&lt;/td&gt;
                &lt;td&gt;护士&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                &lt;th&gt;3&lt;/th&gt;
                &lt;td&gt;王五&lt;/td&gt;
                &lt;td&gt;男&lt;/td&gt;
                &lt;td&gt;教师&lt;/td&gt;
                &lt;/tr&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
            
            &lt;table class=&quot;table caption-top table-borderless&quot;&gt;
                &lt;caption class=&quot;text-center&quot;&gt;&lt;h3&gt;无边框表格&lt;/h5&gt;&lt;/caption&gt;
                &lt;thead  class=&quot;table-light&quot;&gt;
                &lt;tr&gt;
                &lt;th&gt;序号&lt;/th&gt;
                &lt;th&gt;姓名&lt;/th&gt;
                &lt;th&gt;性别&lt;/th&gt;
                &lt;th&gt;职业&lt;/th&gt;
                &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                &lt;tr&gt;
                &lt;th&gt;1&lt;/th&gt;
                &lt;td&gt;张三&lt;/td&gt;
                &lt;td&gt;男&lt;/td&gt;
                &lt;td&gt;警察&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                &lt;th&gt;2&lt;/th&gt;
                &lt;td&gt;李四&lt;/td&gt;
                &lt;td&gt;女&lt;/td&gt;
                &lt;td&gt;护士&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                &lt;th&gt;3&lt;/th&gt;
                &lt;td&gt;王五&lt;/td&gt;
                &lt;td&gt;男&lt;/td&gt;
                &lt;td&gt;教师&lt;/td&gt;
                &lt;/tr&gt;
                &lt;/tbody&gt;
            &lt;/table&gt;
   &lt;/div&gt;
     &lt;script src=&quot;bootstrap5/bootstrap.bundle.min.js&quot; &gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
登录后复制

6.png

6 紧凑表格(小表格)

添加table-sm将所有单元格填充减半,使任何table更加紧凑。

&lt;table class=&quot;table table-sm&quot;&gt;
登录后复制

下面第二个是紧凑表格,仔细看是不是比第一个没使用table-sm那个行高度要小。

7.png

7 垂直对齐

&lt;thead&gt; 的表格单元格始终垂直对齐到底部。&lt;tbody&gt;中的表单元格继承&lt;table&gt;对齐方式,默认情况下将其对齐到顶部。在需要时可以使用垂直对齐类重新对齐。

垂直对齐类有两种修饰符:

  • vertical-align: middle;居中对齐
  • vertical-align: bottom; 对齐到底部

垂直对齐修饰符可以写到表格,可以写到行,也可以写到单元格,写到哪里就作用于哪里。还可以用到p、div等其它标签。

&lt;!doctype html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;link href=&quot;bootstrap5/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;title&gt;列的排序&lt;/title&gt;
    &lt;style&gt;
        th{white-space:nowrap;}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;table class=&quot;table&quot;&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;序号&lt;/th&gt;
                &lt;th&gt;姓名&lt;/th&gt;
                &lt;th&gt;简介&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
               &lt;td&gt;1&lt;/td&gt;
               &lt;td&gt;李白&lt;/td&gt;
               &lt;td&gt;李白(701年-762年) ,字太白,号青莲居士,又号“谪仙人”,是唐代伟大的浪漫主义诗人,被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。&lt;/td&gt;
               &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
            &lt;table class=&quot;table align-middle&quot;&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;序号&lt;/th&gt;
                  &lt;th&gt;姓名&lt;/th&gt;
                  &lt;th&gt;简介&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                 &lt;td&gt;1&lt;/td&gt;
                 &lt;td&gt;李白&lt;/td&gt;
                 &lt;td&gt;李白(701年-762年) ,字太白,号青莲居士,又号“谪仙人”,是唐代伟大的浪漫主义诗人,被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。&lt;/td&gt;
                 &lt;/tr&gt;
                &lt;tr class=&quot;align-bottom&quot;&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;杜甫&lt;/td&gt;
                    &lt;td&gt;杜甫(712年—770年),字子美,原籍湖北襄阳,后徙河南巩县。唐代伟大的现实主义诗人,与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远,被后人称为“诗圣”,他的诗被称为“诗史”。杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。&lt;/td&gt;
                    &lt;/tr&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;3&lt;/td&gt;
                  &lt;td class=&quot;align-top&quot;&gt;白居易&lt;/td&gt;
                  &lt;td&gt;白居易(772年-846年),字乐天,号香山居士,又号醉吟先生,祖籍山西太原。是唐代伟大的现实主义诗人,白居易的诗歌题材广泛,形式多样,语言平易通俗,有“诗魔”和“诗王”之称。有《白氏长庆集》传世,代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
      &lt;/div&gt;
     
    &lt;script src=&quot;bootstrap5/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
登录后复制

第一个表格是不使用垂直对齐的效果。 第二个表格中第一行继承了表格的对齐效果,第二行使用了行的对齐效果,第三行第二单元格使用单元格对齐效果,其他两个单元格使用表格的对齐效果。

8.png

8 水平对齐

水平对齐其实就是文本对齐,使用的是文本通用类,在前面的表格结构中的标题部分已经用过了,有三个修饰符:

  • text-start:左对齐,默认。有时候外层使用了其他方式对齐,可以使用它重置。
  • text-center:居中对齐
  • text-end:靠右对齐

跟垂直对齐一样,垂直对齐修饰符可以写到表格,可以写到行,也可以写到单元格,写到哪里就作用于哪里。还可以用到p、div、h1-h6、span等其它标签,甚至只要有文本的容器都可以使用这个,应用比垂直对齐多得多。这个在前面的好多例子都用到了,就不举例了。

9 嵌套

表格的嵌套就是在表格中的一个单元格中再嵌入一个表格,嵌套表不会继承边框样式、活动样式和表变量。

需要注意的是表格必须嵌套在一个单元格内,而不能直接嵌套到一个行内,如果你想嵌套进一行中,请使用单元格合并功能,如下例子。

&lt;!doctype html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;link href=&quot;bootstrap5/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;title&gt;列的排序&lt;/title&gt;
    &lt;style&gt;
        th{white-space:nowrap;}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;table class=&quot;table caption-top table-bordered border-primary&quot;&gt;
            &lt;caption class=&quot;text-center&quot;&gt;&lt;h3&gt;人员名单&lt;/h5&gt;&lt;/caption&gt;
            &lt;thead&gt;
            &lt;tr&gt;
            &lt;th&gt;序号&lt;/th&gt;
            &lt;th&gt;姓名&lt;/th&gt;
            &lt;th&gt;性别&lt;/th&gt;
            &lt;th&gt;职业&lt;/th&gt;
            &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
            &lt;tr&gt;
            &lt;th&gt;1&lt;/th&gt;
            &lt;td&gt;张三&lt;/td&gt;
            &lt;td&gt;男&lt;/td&gt;
            &lt;td&gt;警察&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
            &lt;th&gt;2&lt;/th&gt;
            &lt;td&gt;李四&lt;/td&gt;
            &lt;td&gt;女&lt;/td&gt;
            &lt;td&gt;护士&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
            &lt;td colspan=&quot;4&quot;&gt;
                &lt;table class=&quot;table caption-top table-bordered border-primary&quot;&gt;
                    &lt;caption class=&quot;text-center&quot;&gt;&lt;h3&gt;据说天使没有性别&lt;/h5&gt;&lt;/caption&gt;
                    &lt;thead&gt;
                    &lt;tr&gt;
                    &lt;th&gt;序号&lt;/th&gt;
                    &lt;th&gt;姓名&lt;/th&gt;
                    &lt;th&gt;职业&lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                    &lt;tr&gt;
                    &lt;th&gt;1&lt;/th&gt;
                    &lt;td&gt;加百列&lt;/td&gt;
                    &lt;td&gt;天使长&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                    &lt;th&gt;2&lt;/th&gt;
                    &lt;td&gt;沙利叶&lt;/td&gt;
                    &lt;td&gt;月之天使&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/td&gt;
            &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
  
    &lt;script src=&quot;bootstrap5/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
登录后复制

9.png

10 强调表格

10.1 条纹行

使用.table-striped在&lt;tbody&gt;范围内任何表格行增加明暗条纹样式效果,还可以配合颜色做出更加美观的表格。

&lt;!doctype html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;meta name=&quot;keywords&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;link href=&quot;bootstrap5/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;title&gt;表格演示&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;table class=&quot;table table-striped&quot;&gt;
                &lt;thead&gt;
                &lt;tr&gt;
                &lt;th&gt;序号&lt;/th&gt;
                &lt;th&gt;姓名&lt;/th&gt;
                &lt;th&gt;性别&lt;/th&gt;
                &lt;th&gt;职业&lt;/th&gt;
                &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                &lt;tr&gt;
                &lt;th&gt;1&lt;/th&gt;
                &lt;td&gt;张三&lt;/td&gt;
                &lt;td&gt;男&lt;/td&gt;
                &lt;td&gt;警察&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                &lt;th&gt;2&lt;/th&gt;
                &lt;td&gt;李四&lt;/td&gt;
                &lt;td&gt;女&lt;/td&gt;
                &lt;td&gt;护士&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                &lt;th&gt;3&lt;/th&gt;
                &lt;td&gt;王五&lt;/td&gt;
                &lt;td&gt;男&lt;/td&gt;
                &lt;td&gt;教师&lt;/td&gt;
                &lt;/tr&gt;
                &lt;/tbody&gt;
                &lt;/table&gt;
                &lt;table class=&quot;table table-dark table-striped&quot;&gt;
                    &lt;thead&gt;
                    &lt;tr&gt;
                    &lt;th&gt;序号&lt;/th&gt;
                    &lt;th&gt;姓名&lt;/th&gt;
                    &lt;th&gt;性别&lt;/th&gt;
                    &lt;th&gt;职业&lt;/th&gt;
                    &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                    &lt;tr&gt;
                    &lt;th&gt;1&lt;/th&gt;
                    &lt;td&gt;张三&lt;/td&gt;
                    &lt;td&gt;男&lt;/td&gt;
                    &lt;td&gt;警察&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                    &lt;th&gt;2&lt;/th&gt;
                    &lt;td&gt;李四&lt;/td&gt;
                    &lt;td&gt;女&lt;/td&gt;
                    &lt;td&gt;护士&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;tr&gt;
                    &lt;th&gt;3&lt;/th&gt;
                    &lt;td&gt;王五&lt;/td&gt;
                    &lt;td&gt;男&lt;/td&gt;
                    &lt;td&gt;教师&lt;/td&gt;
                    &lt;/tr&gt;
                    &lt;/tbody&gt;
                    &lt;/table&gt;
                    &lt;table class=&quot;table table-success table-striped&quot;&gt;
                        &lt;thead&gt;
                        &lt;tr&gt;
                        &lt;th&gt;序号&lt;/th&gt;
                        &lt;th&gt;姓名&lt;/th&gt;
                        &lt;th&gt;性别&lt;/th&gt;
                        &lt;th&gt;职业&lt;/th&gt;
                        &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
                        &lt;tr&gt;
                        &lt;th&gt;1&lt;/th&gt;
                        &lt;td&gt;张三&lt;/td&gt;
                        &lt;td&gt;男&lt;/td&gt;
                        &lt;td&gt;警察&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                        &lt;th&gt;2&lt;/th&gt;
                        &lt;td&gt;李四&lt;/td&gt;
                        &lt;td&gt;女&lt;/td&gt;
                        &lt;td&gt;护士&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                        &lt;th&gt;3&lt;/th&gt;
                        &lt;td&gt;王五&lt;/td&gt;
                        &lt;td&gt;男&lt;/td&gt;
                        &lt;td&gt;教师&lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;/tbody&gt;
                        &lt;/table&gt;       
        &lt;/div&gt;
   
     &lt;script src=&quot;bootstrap5/bootstrap.bundle.min.js&quot; &gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
登录后复制

10.png

10.2 可悬停行

在table标签类中添加table-hover可对&lt;tbody&gt;中的表行启用悬停效果,当鼠标放在某一行上面时,郑航会特殊显示,。 将上面11.9.1代码中table-striped换为table-hover可实现悬停效果,也可以和table-striped一起使用,用法很简单,在此就不在演示了。

10.3 激活表

通过添加table-active高亮显示表行或单元格。注意这个修饰符只能加在行或者单元格上,其用法和垂直对齐用法差不多。这里不再演示,只给出效果图。

11.png

12.png

更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!

以上是Bootstrap中怎么使用表格?强大表格的用法浅析的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PPT表格中插入的图片调整格式的操作步骤 PPT表格中插入的图片调整格式的操作步骤 Mar 26, 2024 pm 04:16 PM

PPT表格中插入的图片调整格式的操作步骤

关于销量预测如何制作表格 关于销量预测如何制作表格 Mar 20, 2024 pm 03:06 PM

关于销量预测如何制作表格

bootstrap怎么引入Eclipse bootstrap怎么引入Eclipse Apr 05, 2024 am 02:30 AM

bootstrap怎么引入Eclipse

wps数值怎样设置按条件自动变色_wps表格数值设置按条件自动变色的步骤 wps数值怎样设置按条件自动变色_wps表格数值设置按条件自动变色的步骤 Mar 27, 2024 pm 07:30 PM

wps数值怎样设置按条件自动变色_wps表格数值设置按条件自动变色的步骤

bootstrap怎么引入idea bootstrap怎么引入idea Apr 05, 2024 am 02:33 AM

bootstrap怎么引入idea

bootstrap中介效应检验结果怎么看stata bootstrap中介效应检验结果怎么看stata Apr 05, 2024 am 01:48 AM

bootstrap中介效应检验结果怎么看stata

大模型一对一战斗75万轮,GPT-4夺冠,Llama 3位列第五 大模型一对一战斗75万轮,GPT-4夺冠,Llama 3位列第五 Apr 23, 2024 pm 03:28 PM

大模型一对一战斗75万轮,GPT-4夺冠,Llama 3位列第五

新手制作表格有哪些技巧 新手制作表格有哪些技巧 Mar 21, 2024 am 09:11 AM

新手制作表格有哪些技巧

See all articles