Bootstrap <基礎五>表格Bootstrap 提供了一個清晰的建立表格的布局。下表列出了 Bootstrap 支援的一些表格元素：

标簽

描述

<table>

為表格添加基礎樣式。

<thead>

表格标題行的容器元素（<tr>），用來辨別表格列。

<tbody>

表格主體中的表格行的容器元素（<tr>）。

<tr>

一組出現在單行上的表格單元格的容器元素（<td> 或 <th>）。

<td>

預設的表格單元格。

<th>

特殊的表格單元格，用來辨別列或行（取決于範圍和位置）。必須在 <thead> 内使用。

關于表格存儲内容的描述或總結。

下表樣式可用于表格中：

類

.table

為任意 <table> 添加基本樣式 (隻有橫向分隔線)

.table-striped

在 <tbody> 内添加斑馬線形式的條紋 ( IE8 不支援)

.table-bordered

為所有表格的單元格添加邊框

.table-hover

在 <tbody> 内的任一行啟用滑鼠懸停狀态

.table-condensed

讓表格更加緊湊

聯合使用所有表格類

下表的類可用于表格的行或者單元格：

.active

将懸停的顔色應用在行或者單元格上

.success

表示成功的操作

.info

表示資訊變化的操作

.warning

表示一個警告的操作

.danger

表示一個危險的操作

如果您想要一個隻帶有内邊距（padding）和水準分割的基本表，請添加 class .table，如下面執行個體所示：

結果如下所示：

Bootstrap <基礎五>表格Bootstrap 提供了一個清晰的建立表格的布局。下表列出了 Bootstrap 支援的一些表格元素：

除了基本的表格标記和 .table class，還有一些可以用來為标記定義樣式的類。下面将向您介紹這些類。

通過添加 .table-striped class，您将在 <tbody> 内的行上看到條紋，如下面的執行個體所示：

通過添加 .table-bordered class，您将看到每個元素周圍都有邊框，且占整個表格是圓角的，如下面的執行個體所示：

通過添加 .table-hover class，當指針懸停在行上時會出現淺灰色背景，如下面的執行個體所示：

通過添加 .table-condensed class，行内邊距（padding）被切為兩半，以便讓表看起來更緊湊，如下面的執行個體所示。這在想讓資訊看起來更緊湊時非常有用。

下表中所列出的上下文類允許您改變表格行或單個單元格的背景顔色。

對某一特定的行或單元格應用懸停顔色

表示一個成功的或積極的動作

表示一個需要注意的警告

表示一個危險的或潛在的負面動作

這些類可被應用到 <tr>、<td> 或 <th>。

通過把任意的 .table 包在 .table-responsive class 内，您可以讓表格水準滾動以适應小型裝置（小于 768px）。當在大于 768px 寬的大型裝置上檢視時，您将看不到任何的差别。

系列文章：

<a href="http://www.cnblogs.com/lansy/p/4334611.html%20" target="_blank">Bootstrap <基礎一> css 概覽</a>

<a href="http://www.cnblogs.com/lansy/p/4337381.html%20" target="_blank">Bootstrap<基礎二>網絡系統</a>

<a href="http://www.cnblogs.com/lansy/p/4339002.html%20" target="_blank">Bootstrap<基礎三>排版</a>

<a href="http://www.cnblogs.com/lansy/p/4341498.html%20" target="_blank">Bootstrap<基礎四> 代碼</a>

<a href="http://www.cnblogs.com/lansy/p/4343823.html%20" target="_blank">Bootstrap <基礎五>表格</a>

<a href="http://www.cnblogs.com/lansy/p/4346492.html">Bootstrap<基礎六> 表單</a>

<a href="http://www.cnblogs.com/lansy/p/4355913.html%20" target="_blank">Bootstrap <基礎七>按鈕</a>

<a href="http://www.cnblogs.com/lansy/p/4380536.html%20" target="_blank">Bootstrap <基礎八>圖檔</a>

<a href="http://www.cnblogs.com/lansy/p/4395706.html" target="_blank">Bootstrap<基礎九>輔助類</a>

<a href="http://www.cnblogs.com/lansy/p/4397409.html%20" target="_blank">Bootstrap<基礎十> 響應式實用工具</a>

<a href="http://www.cnblogs.com/lansy/p/4401476.html%20" target="_blank">Bootstrap<基礎十一>字型圖示(Glyphicons)</a>

<a href="http://www.cnblogs.com/lansy/p/4408654.html%20" target="_blank">Bootstrap <基礎十二>下拉菜單（Dropdowns）</a>

<a href="http://www.cnblogs.com/lansy/p/4413528.html%20" target="_blank">Bootstrap<基礎十三> 按鈕組</a>

<a href="http://www.cnblogs.com/lansy/p/4423945.html%20" target="_blank">Bootstrap<基礎十四> 按鈕下拉菜單</a>

<a href="http://www.cnblogs.com/lansy/p/4427558.html%20" target="_blank">Bootstrap<基礎十五> 輸入框組</a>

<a href="http://www.cnblogs.com/lansy/p/4430985.html%20" target="_blank">Bootstrap<基礎十六> 導航元素</a>

<a href="http://www.cnblogs.com/lansy/p/4433938.html%20" target="_blank">Bootstrap<基礎十七>導航欄</a>

<a href="http://www.cnblogs.com/lansy/p/4440639.html%20" target="_blank">Bootstrap <基礎十八>面包屑導航（Breadcrumbs）</a>

<a href="http://www.cnblogs.com/lansy/p/4440639.html%20" target="_blank">Bootstrap <基礎十九>分頁</a>

<a href="http://www.cnblogs.com/lansy/p/4446365.html%20" target="_blank">Bootstrap<基礎二十> 标簽</a>

<a href="http://www.cnblogs.com/lansy/p/4449345.html%20" target="_blank">Bootstrap <基礎二十一>徽章（Badges）</a>

<a href="http://www.cnblogs.com/lansy/p/4452409.html%20" target="_blank">Bootstrap <基礎二十二>超大螢幕（Jumbotron）</a>

<a href="http://www.cnblogs.com/lansy/p/4458972.html%20" target="_blank">Bootstrap <基礎二十三>頁面标題（Page Header）</a>

<a href="http://www.cnblogs.com/lansy/p/4462048.html%20" target="_blank">Bootstrap<基礎二十四> 縮略圖</a>

<a href="http://www.cnblogs.com/lansy/p/4475377.html%20" target="_blank">Bootstrap <基礎二十五>警告（Alerts）</a>

<a href="http://www.cnblogs.com/lansy/p/4478334.html%20" target="_blank">Bootstrap <基礎二十六>進度條</a>

Bootstrap <基礎五>表格Bootstrap 提供了一個清晰的建立表格的布局。下表列出了 Bootstrap 支援的一些表格元素：

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

Bootstrap &lt;基礎五&gt;表格Bootstrap 提供了一個清晰的建立表格的布局。下表列出了 Bootstrap 支援的一些表格元素：

繼續閱讀

Bootstrap <基礎五>表格Bootstrap 提供了一個清晰的建立表格的布局。下表列出了 Bootstrap 支援的一些表格元素：