Bootstrap4 表格

Bootstrap4 基礎表格

Bootstrap4 通過 .table 類來設置基礎表格的樣式，實例如下:

創(chuàng)新互聯(lián)公司長期為上千客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為和田縣企業(yè)提供專業(yè)的做網站、成都網站建設，和田縣網站改版等技術服務。擁有10多年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

實例

<
table

class
=
"
table
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

條紋表格

通過添加 .table-striped 類，您將在 內的行上看到條紋，如下面的實例所示：

實例

<
table

class
=
"
table table-striped
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

帶邊框表格

.table-bordered 類可以為表格添加邊框

實例

<
table

class
=
"
table table-bordered
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

鼠標懸停狀態(tài)表格

.table-hover 類可以為表格的每一行添加鼠標懸停效果（灰色背景）：

實例

<
table

class
=
"
table table-hover
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

黑色背景表格

.table-dark 類可以為表格添加黑色背景：

實例

<
table

class
=
"
table table-dark
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

黑色條紋表格

聯(lián)合使用 .table-dark 和 .table-striped 類可以創(chuàng)建黑色的條紋表格：

實例

<
table

class
=
"
table table-dark table-striped
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

鼠標懸停效果 - 黑色背景表格

聯(lián)合使用 .table-dark 和 .table-hover 類可以設置黑色背景表格的鼠標懸停效果：

實例

<
table

class
=
"
table table-dark table-hover
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

無邊框表格

.table-borderless 類可以設置一個無邊框的表格：

實例

<
table

class
=
"
table table-borderless
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

指定意義的顏色類

通過指定意義的顏色類可以為表格的行或者單元格設置顏色：

實例

<
table

class
=
"
table
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
Default
td
>

<
td
>
Defaultson
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr

class
=
"
table-primary
"
>

<
td
>
Primary
td
>

<
td
>
Joe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr

class
=
"
table-success
"
>

<
td
>
Success
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr

class
=
"
table-danger
"
>

<
td
>
Danger
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr

class
=
"
table-info
"
>

<
td
>
Info
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr

class
=
"
table-warning
"
>

<
td
>
Warning
td
>

<
td
>
Refs
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr

class
=
"
table-active
"
>

<
td
>
Active
td
>

<
td
>
Activeson
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr

class
=
"
table-secondary
"
>

<
td
>
Secondary
td
>

<
td
>
Secondson
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr

class
=
"
table-light
"
>

<
td
>
Light
td
>

<
td
>
Angie
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr

class
=
"
table-dark text-dark
"
>

<
td
>
Dark
td
>

<
td
>
Bo
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

下表列出了表格顏色類的說明:

類名	描述
.table-primary	藍色: 指定這是一個重要的操作
.table-success	綠色: 指定這是一個允許執(zhí)行的操作
.table-danger	紅色: 指定這是可以危險的操作
.table-info	淺藍色: 表示內容已變更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用于鼠標懸停效果
.table-secondary	灰色: 表示內容不怎么重要
.table-light	淺灰色，可以是表格行的背景
.table-dark	深灰色，可以是表格行的背景

表頭顏色

在 Bootstrap v4.0.0-beta.2 中.thead-dark 類用于給表頭添加黑色背景， .thead-light 類用于給表頭添加灰色背景:

在 Bootstrap v4.0.0-beta 這個版本中，.thead-inverse 類用于給表頭添加黑色背景，.thead-default 類用于給表頭添加灰色背景。

實例

<
table

class
=
"
table
"
>

<
thead

class
=
"
thead-dark
"
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

<
table

class
=
"
table
"
>

<
thead

class
=
"
thead-light
"
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

較小的表格

.table-sm 類用于通過減少內邊距來設置較小的表格:

實例

<
table

class
=
"
table table-bordered table-sm
"
>

<
thead
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
[email protected]
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
[email protected]
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

響應式表格

.table-responsive 類用于創(chuàng)建響應式表格：在屏幕寬度小于 992px 時會創(chuàng)建水平滾動條，如果可視區(qū)域寬度大于 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
"
>
...
table
>

div
>

嘗試一下 ?

本文標題：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4表格
文章位置：http://uogjgqi.cn/article/codigid.html