Bootstrap5 表格

Bootstrap5 基礎(chǔ)表格

Bootstrap5 通過 .table 類來設(shè)置基礎(chǔ)表格的樣式，實(shí)例如下:

創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì)，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕10年，專業(yè)且經(jīng)驗(yàn)豐富。10年網(wǎng)站優(yōu)化營(yíng)銷經(jīng)驗(yàn)，我們已為數(shù)千家中小企業(yè)提供了成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)解決方案，按需開發(fā)網(wǎng)站，設(shè)計(jì)滿意，售后服務(wù)無(wú)憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!

實(shí)例

<
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
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

條紋表格

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

實(shí)例

<
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
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

帶邊框表格

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

實(shí)例

<
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
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

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

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

實(shí)例

<
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
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

黑色背景表格

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

實(shí)例

<
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
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

黑色條紋表格

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

實(shí)例

<
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
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

鼠標(biāo)懸停效果 - 黑色背景表格

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

實(shí)例

<
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
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

無(wú)邊框表格

.table-borderless 類可以設(shè)置一個(gè)無(wú)邊框的表格：

實(shí)例

<
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
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

指定意義的顏色類

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

實(shí)例

<
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
>
def@somemail.com
td
>

tr
>

<
tr

class
=
"
table-primary
"
>

<
td
>
Primary
td
>

<
td
>
Joe
td
>

<
td
>
joe@example.com
td
>

tr
>

<
tr

class
=
"
table-success
"
>

<
td
>
Success
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr

class
=
"
table-danger
"
>

<
td
>
Danger
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr

class
=
"
table-info
"
>

<
td
>
Info
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

<
tr

class
=
"
table-warning
"
>

<
td
>
Warning
td
>

<
td
>
Refs
td
>

<
td
>
bo@example.com
td
>

tr
>

<
tr

class
=
"
table-active
"
>

<
td
>
Active
td
>

<
td
>
Activeson
td
>

<
td
>
act@example.com
td
>

tr
>

<
tr

class
=
"
table-secondary
"
>

<
td
>
Secondary
td
>

<
td
>
Secondson
td
>

<
td
>
sec@example.com
td
>

tr
>

<
tr

class
=
"
table-light
"
>

<
td
>
Light
td
>

<
td
>
Angie
td
>

<
td
>
angie@example.com
td
>

tr
>

<
tr

class
=
"
table-dark text-dark
"
>

<
td
>
Dark
td
>

<
td
>
Bo
td
>

<
td
>
bo@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

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

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

表頭顏色

我們也可以設(shè)置表頭的顏色，例如 .table-dark 類用于給表頭添加黑色背景， .table-light 類用于給表頭添加灰色背景:

實(shí)例

<
table

class
=
"
table
"
>

<
thead

class
=
"
table-dark
"
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

<
table

class
=
"
table
"
>

<
thead

class
=
"
table-light
"
>

<
tr
>

<
th
>
Firstname
th
>

<
th
>
Lastname
th
>

<
th
>
Email
th
>

tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
John
td
>

<
td
>
Doe
td
>

<
td
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

較小的表格

.table-sm 類用于通過減少內(nèi)邊距來設(shè)置較小的表格:

實(shí)例

<
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
>
john@example.com
td
>

tr
>

<
tr
>

<
td
>
Mary
td
>

<
td
>
Moe
td
>

<
td
>
mary@example.com
td
>

tr
>

<
tr
>

<
td
>
July
td
>

<
td
>
Dooley
td
>

<
td
>
july@example.com
td
>

tr
>

tbody
>

table
>

嘗試一下 ?

響應(yīng)式表格

.table-responsive 類用于創(chuàng)建響應(yīng)式表格：在屏幕寬度小于 992px 時(shí)會(huì)創(chuàng)建水平滾動(dòng)條，如果可視區(qū)域?qū)挾却笥?992px 則顯示不同效果（沒有滾動(dòng)條）:

實(shí)例

<
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
>

嘗試一下 ?

你可以通過以下類設(shè)定在指定屏幕寬度下顯示滾動(dòng)條：

類名	屏幕寬度
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px
.table-responsive-xxl	< 1400px

實(shí)例

<
div

class
=
"
table-responsive-sm
"
>

<
table

class
=
"
table
"
>
...
table
>

div
>

嘗試一下 ?

標(biāo)題名稱：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5表格
轉(zhuǎn)載源于：http://www.5511xx.com/article/cdggihe.html