搜尋
首頁web前端Bootstrap教程Bootstrap中怎麼使用表格？強大表格的用法淺析

Bootstrap中怎麼使用表格？強大表格的用法淺析

青灯夜游
青灯夜游
Nov 22, 2021 pm 07:45 PM
bootstrap表格

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

Bootstrap中怎麼使用表格？強大表格的用法淺析

1 强大的Bootstrap的表格

在html标签<table>加上基本类别 .table就可以使用Bootstrap的表格可选修饰类别或是自定义样式进行扩展。【相关推荐：《<a href="https://www.php.cn/course/list/15.html" target="_blank" textvalue="bootstrap教程">bootstrap教程</a>》】<p><strong>所有表格样式在Bootstrap中都不会继承，意味着嵌套表格的样式都是独立于父表格。</strong></p> <p>以下是使用最基本的表格排版在Bootstrap中的外观。</p><pre class='brush:php;toolbar:false;'>&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;h1 id=&quot;表格演示&quot;&gt;表格演示&lt;/h1&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;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 colspan=&quot;2&quot;&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;</pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/409/149/315/163758117010721Bootstrap中怎麼使用表格？強大表格的用法淺析?x-oss-process=image/resize,p_40" class="lazy" title="163758117010721Bootstrap中怎麼使用表格？強大表格的用法淺析" alt="Bootstrap中怎麼使用表格？強大表格的用法淺析"></p> <p>可以看到，默认的简单表格只是在table标签加了个class="table"，就和普通的html表格外观上有了很大改观。</p> <h1 id="表格的颜色">2 表格的颜色</h1> <p>使用语意化class给表格列或单元格上色。表哥颜色可以分别设置在<code><table>、<tr>、<thead>、<th>、</th> <td>等一切表格元素中。如果是加在表格中，则在整个表格中有效，加在行中对整行有效，加在单元格中对整个单元格有效。<p>到目前为止好像没法加在整列中，要对整列使用某个颜色，只能将其中的所有单元格设置颜色。</p><pre class='brush:php;toolbar:false;'>&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;</pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/977/398/286/163758117832327Bootstrap中怎麼使用表格？強大表格的用法淺析?x-oss-process=image/resize,p_40" class="lazy" title="163758117832327Bootstrap中怎麼使用表格？強大表格的用法淺析" alt="Bootstrap中怎麼使用表格？強大表格的用法淺析"></p> <p>通过这个例子大家可以基本明白表格颜色的用法，需要主要的是对整个表格运用颜色是用<code><table class="table table-secondary">，不要省略前面的table， 虽然例子中最后一行也是table-success，但是事实上，最后一行是设置在单元格上的。<h1 id="表格的结构-表头-表尾-标题">3 表格的结构-表头、表尾、标题</h1><pre class='brush:php;toolbar:false;'>&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;</pre><p>显示效果</p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/272/596/675/163758118692480Bootstrap中怎麼使用表格？強大表格的用法淺析?x-oss-process=image/resize,p_40" class="lazy" title="163758118692480Bootstrap中怎麼使用表格？強大表格的用法淺析" alt="Bootstrap中怎麼使用表格？強大表格的用法淺析"></p> <p>从上面的例子可以看出表格由下面几部分组成：</p> <ul> <li>表头thead：t是表格的简写head是头部</li> <li>表尾tfoot：t是表格foot是底部</li> <li>标题caption：只有一行，默认在表尾底部，演示中我通过在table中添加caption-top使他在上部。默认标题靠左对齐，我通过在caption中添加class="text-center"使文字居中。默认字体较小，我通过h3标题使他变大。</li> <li>行tr：一行，td标签必须写在tr中。</li> <li>列td：一个单元格，通过<code><td colspan="2">可以使两个相邻的单元格合并，里面的数字可以更改，但不能大于行中所有的列数。<li>表头列th：与td唯一区别是里面文字粗体显示</li> <p>通常为了美观，一般使用<code><thead>或<code><thead> 使<code><thead>显示为浅灰色或深灰色，其用法与11.2.1中的行的颜色一样，另外一般情况下表尾很少使用。<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/700/205/353/163758119011937Bootstrap中怎麼使用表格？強大表格的用法淺析?x-oss-process=image/resize,p_40" class="lazy" title="163758119011937Bootstrap中怎麼使用表格？強大表格的用法淺析" alt="Bootstrap中怎麼使用表格？強大表格的用法淺析"></p> <h1 id="响应式表格">4 响应式表格</h1> <p>当表格一行的内容超过浏览器宽度的时候，默认浏览器会出现滚动条，这样存在的一个问题就是会把页面无线拉伸，严重影响网页中其他页面元素的显示效果。</p> <p>而响应式表格是指把表格放在一个<code><div class="table-responsive"> </div>标签中，而该div标签是响应的，与容器同宽度，当表格宽度大于该div标签的时候，该div容器就会出现滚动条，而不是在浏览器上，这样就保证了表格不会超出页面宽度。

<!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>
    <style>
        td{white-space:nowrap;}
    </style>
  </head>
  <body>
        <div class="container">
            <div class="table-responsive">
            <table class="table caption-top">
                <thead>
                <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
                <th>表头5</th>
                <th>表头6</th>
                <th>表头7</th>
                <th>表头8</th>
                <th>表头9</th>
                <th>表头10</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                <td>我是第1个单元格</td>
                <td>我是第2个单元格</td>
                <td>我是第3个单元格</td>
                <td>我是第4个单元格</td>
                <td>我是第5个单元格</td>
                <td>我是第6个单元格</td>
                <td>我是第7个单元格</td>
                <td>我是第8个单元格</td>
                <td>我是第9个单元格</td>
                <td>我是第10个单元格</td>
                </tr>
            </table>
            </div>
   </div>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

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

Bootstrap中怎麼使用表格？強大表格的用法淺析

在特点断点处响应

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

5 表格边框

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

<table class="table table-bordered border-primary">
...
</table>

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

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

现在给出一个综合实例。

<!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">
            <table class="table caption-top table-bordered border-primary">
                <caption class="text-center"><h3>带颜色边框表格</h5></caption>
                <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>男</td>
                <td>教师</td>
                </tr>
                </tbody>
            </table>
            
            <table class="table caption-top table-borderless">
                <caption class="text-center"><h3>无边框表格</h5></caption>
                <thead  class="table-light">
                <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>男</td>
                <td>教师</td>
                </tr>
                </tbody>
            </table>
   </div>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中怎麼使用表格？強大表格的用法淺析

6 紧凑表格（小表格）

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



下面第二个是紧凑表格，仔细看是不是比第一个没使用table-sm那个行高度要小。
Bootstrap中怎麼使用表格？強大表格的用法淺析
7 垂直对齐
<thead> 的表格单元格始终垂直对齐到底部。<code><tbody>中的表单元格继承<code><table>对齐方式，默认情况下将其对齐到顶部。在需要时可以使用垂直对齐类重新对齐。<p>垂直对齐类有两种修饰符：</p>
<ul>
<li>vertical-align: middle;居中对齐</li>
<li>vertical-align: bottom; 对齐到底部</li>
</ul>
<p>垂直对齐修饰符可以写到表格，可以写到行，也可以写到单元格，写到哪里就作用于哪里。还可以用到p、div等其它标签。</p><pre class='brush:php;toolbar:false;'>&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;</pre><p>第一个表格是不使用垂直对齐的效果。
第二个表格中第一行继承了表格的对齐效果，第二行使用了行的对齐效果，第三行第二单元格使用单元格对齐效果，其他两个单元格使用表格的对齐效果。</p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/451/987/683/163758123063652Bootstrap中怎麼使用表格？強大表格的用法淺析?x-oss-process=image/resize,p_40" class="lazy" title="163758123063652Bootstrap中怎麼使用表格？強大表格的用法淺析" alt="Bootstrap中怎麼使用表格？強大表格的用法淺析"></p>
<h1 id="水平对齐">8 水平对齐</h1>
<p>水平对齐其实就是文本对齐，使用的是文本通用类，在前面的表格结构中的标题部分已经用过了，有三个修饰符：</p>
<ul>
<li>text-start：左对齐，默认。有时候外层使用了其他方式对齐，可以使用它重置。</li>
<li>text-center：居中对齐</li>
<li>text-end：靠右对齐</li>
</ul>
<p>跟垂直对齐一样，垂直对齐修饰符可以写到表格，可以写到行，也可以写到单元格，写到哪里就作用于哪里。还可以用到p、div、h1-h6、span等其它标签，甚至只要有文本的容器都可以使用这个，应用比垂直对齐多得多。这个在前面的好多例子都用到了，就不举例了。</p>
<h1 id="嵌套">9 嵌套</h1>
<p>表格的嵌套就是在表格中的一个单元格中再嵌入一个表格，嵌套表不会继承边框样式、活动样式和表变量。</p>
<p>需要注意的是表格必须嵌套在一个单元格内，而不能直接嵌套到一个行内，如果你想嵌套进一行中，请使用单元格合并功能，如下例子。</p><pre class='brush:php;toolbar:false;'>&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;</pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/931/254/332/163758124090990Bootstrap中怎麼使用表格？強大表格的用法淺析?x-oss-process=image/resize,p_40" class="lazy" title="163758124090990Bootstrap中怎麼使用表格？強大表格的用法淺析" alt="Bootstrap中怎麼使用表格？強大表格的用法淺析"></p>
<h1 id="强调表格">10 强调表格</h1>
<h2 id="条纹行">10.1 条纹行</h2>
<p>使用.table-striped在<code><tbody>范围内任何表格行增加明暗条纹样式效果，还可以配合颜色做出更加美观的表格。<pre class='brush:php;toolbar:false;'>&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;</pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/642/152/584/163758125219365Bootstrap中怎麼使用表格？強大表格的用法淺析?x-oss-process=image/resize,p_40" class="lazy" title="163758125219365Bootstrap中怎麼使用表格？強大表格的用法淺析" alt="Bootstrap中怎麼使用表格？強大表格的用法淺析"></p>
<h2 id="可悬停行">10.2 可悬停行</h2>
<p>在table标签类中添加table-hover可对<code><tbody>中的表行启用悬停效果，当鼠标放在某一行上面时，郑航会特殊显示，。
将上面11.9.1代码中table-striped换为table-hover可实现悬停效果，也可以和table-striped一起使用，用法很简单，在此就不在演示了。<h2 id="啟動表格">10.3 啟動表格</h2>
<p>透過新增table-active高亮顯示表格行或儲存格。注意這個修飾符只能加在行或單元格上，其用法和垂直對齊用法差不多。這裡不再演示，只給出效果圖。 </p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/621/402/852/163758125875265Bootstrap中怎麼使用表格？強大表格的用法淺析?x-oss-process=image/resize,p_40" class="lazy" title="163758125875265Bootstrap中怎麼使用表格？強大表格的用法淺析" alt="1Bootstrap中怎麼使用表格？強大表格的用法淺析"></p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/595/348/356/163758126183196Bootstrap中怎麼使用表格？強大表格的用法淺析?x-oss-process=image/resize,p_40" class="lazy" title="163758126183196Bootstrap中怎麼使用表格？強大表格的用法淺析" alt="1Bootstrap中怎麼使用表格？強大表格的用法淺析"></p>
<p>更多關於bootstrap的相關知識，可存取：<a href="https://www.php.cn/course/list/15.html" target="_blank" textvalue="bootstrap基础教程">bootstrap基礎教學</a>！ ！ </p>
</tbody>



























以上是Bootstrap中怎麼使用表格？強大表格的用法淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除
相關文章
將引導程序集成到React：實用指南將引導程序集成到React：實用指南Apr 25, 2025 am	 12:04 AM
將Bootstrap集成到React項目中的步驟包括：1.安裝Bootstrap包，2.導入CSS文件，3.使用Bootstrap類名樣式化元素，4.使用React-Bootstrap或reactstrap庫來使用Bootstrap的JavaScript組件。這種集成利用React的組件化和Bootstrap的樣式系統，實現高效的UI開發。
Bootstrap是用什麼？一個實用的解釋Bootstrap是用什麼？一個實用的解釋Apr 24, 2025 am	 12:16 AM
bootstrapisapowerfulflameworkthatsimplifiesCreatingingResponsive，移動 -  firstwebsites.itoffers.itoffers：1）AgridSystemforadaptableBableLayouts，2）2）pre-styledlementslikeButtonslikeButtonSandForms和3）JavaScriptCompriptcomponcomponentsSuchcaroSelSuselforEnhanceSuch forenhanceTinteractivity。
引導程序：從佈局到組件引導程序：從佈局到組件Apr 23, 2025 am	 12:06 AM
Bootstrap是一個由Twitter開發的前端框架，集成了HTML、CSS和JavaScript，幫助開發者快速構建響應式網站。其核心功能包括：柵格系統與佈局：基於12列的設計，使用flexbox佈局，支持不同設備尺寸的響應式頁面。組件與樣式：提供豐富的組件庫，如按鈕、模態框等，通過添加類名即可實現美觀效果。工作原理：依賴CSS和JavaScript，CSS使用LESS或SASS預處理器，JavaScript依賴jQuery，實現交互和動態效果。通過這些功能，Bootstrap大大提升了開發
什麼是bootstrap？初學者的介紹什麼是bootstrap？初學者的介紹Apr 22, 2025 am	 12:07 AM
BootstrapisafreeCSSframeworkthatsimplifieswebdevelopmentbyprovidingpre-styledcomponentsandJavaScriptplugins.It'sidealforcreatingresponsive,mobile-firstwebsites,offeringaflexiblegridsystemforlayoutsandasupportivecommunityforlearningandcustomization.
Bootstrap Demystified：一個簡單的解釋Bootstrap Demystified：一個簡單的解釋Apr 21, 2025 am	 12:13 AM
Bootstrapisafree,open-sourceCSSframeworkthathelpscreateresponsive,mobile-firstwebsites.1)Itoffersagridsystemforlayoutflexibility,2)includespre-styledcomponentsforquickdesign,and3)ishighlycustomizabletoavoidgenericlooks,butrequiresunderstandingCSStoop
引導與反應：選擇正確的方法引導與反應：選擇正確的方法Apr 20, 2025 am	 12:09 AM
Bootstrap適合快速搭建和小型項目，而React適合複雜的、交互性強的應用。 1)Bootstrap提供預定義的CSS和JavaScript組件，簡化響應式界面開發。 2)React通過組件化開發和虛擬DOM，提升性能和交互性。
Bootstrap的目的：建立一致且有吸引力的網站Bootstrap的目的：建立一致且有吸引力的網站Apr 19, 2025 am	 12:07 AM
Bootstrap的主要用途是幫助開發者快速構建響應式、移動優先的網站。其核心功能包括：1.響應式設計，通過網格系統實現不同設備的佈局調整；2.預定義組件，如導航欄和模態框，確保美觀和跨瀏覽器兼容性；3.支持自定義和擴展，使用Sass變量和mixins調整樣式。
Bootstrap與其他框架：比較概述Bootstrap與其他框架：比較概述Apr 18, 2025 am	 12:06 AM
Bootstrap優於TailwindCSS、Foundation和Bulma，因為它易用且快速開發響應式網站。 1.Bootstrap提供豐富的預定義樣式和組件庫。 2.其CSS和JavaScript庫支持響應式設計和交互功能。 3.適合快速開發，但自定義樣式可能較複雜。
See all articles
熱AI工具
Undresser.AI Undress
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
Undress AI Tool
免費脫衣圖片
Clothoff.io
Clothoff.io
AI脫衣器
Video Face Swap
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
顯示更多
熱門文章
刺客信條陰影：貝殼謎語解決方案
4 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
4 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
1 個月前ByDDD
Atomfall指南：項目位置，任務指南和技巧
1 個月前ByDDD
顯示更多
熱工具
PhpStorm Mac 版本
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
Atom編輯器mac版下載
Atom編輯器mac版下載
最受歡迎的的開源編輯器
WebStorm Mac版
WebStorm Mac版
好用的JavaScript開發工具
SecLists
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
EditPlus 中文破解版
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
顯示更多
熱門話題
gmail信箱登陸入口在哪裡
7707
15
Java教學
1640
14
CakePHP 教程
1394
52
Laravel 教程
1288
25
PHP教程
1232
29
顯示更多