表格 - 页面内容

多种表格样式，包括基础表格、隔行变色、边框、鼠标悬停、紧凑样式、语境色和响应式表格。

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5
1	2	3	4	5
6	6	6	6	6

<table class="table">
    <thead>
        <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </tbody>
    <tfoot>
        <tr><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td></tr>
    </tfoot>
</table>

使用 .table-striped 为 <tbody> 内的行添加斑马条纹样式。

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

<table class="table table-striped">
    <thead>
        <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </tbody>
</table>

使用 .table-bordered 为表格的每个单元格添加边框。

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

<table class="table table-bordered table-striped">
    <thead class="thead-subtle">
        <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </tbody>
</table>

使用 .table-hover 为每一行添加鼠标悬停效果。

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

<table class="table table-bordered table-striped table-hover">
    <thead class="thead-subtle">
        <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </tbody>
</table>

反转色表头

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

<table class="table table-bordered table-striped table-hover">
    <thead class="thead-inverse">
        <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </tbody>
</table>

浅色表头

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

<table class="table table-bordered table-striped table-hover">
    <thead class="thead-subtle">
        <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </tbody>
</table>

使用 .table-sm 让表格更加紧凑。

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

<table class="table table-bordered table-sm table-striped table-hover">
    <thead class="thead-subtle">
        <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </tbody>
</table>

语境色类可以用于整个表格、整行或单个单元格。

表格语境色

1	2	3	4	5
1	2	3	4	5

<table class="table table-bordered table-primary table-striped table-hover">
    <thead class="thead-inverse">
        <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </tbody>
</table>

行语境色

active	1	2	3	4	5
primary	1	2	3	4	5
success	1	2	3	4	5
info	1	2	3	4	5
warning	1	2	3	4	5
danger	1	2	3	4	5

<table class="table table-bordered table-sm table-striped table-hover">
    <tbody>
        <tr class="table-active"><th>active</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr class="table-primary"><th>primary</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr class="table-success"><th>success</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr class="table-info"><th>info</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr class="table-warning"><th>warning</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr class="table-danger"><th>danger</th><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </tbody>
</table>

单元格语境色

语境色	active	primary	success	info	warning	danger
数据	active	primary	success	info	warning	danger

<table class="table table-bordered table-sm table-striped table-hover">
    <thead class="thead-inverse">
        <tr>
            <th>语境色</th>
            <th>active</th>
            <th class="table-primary">primary</th>
            <th class="table-success">success</th>
            <th class="table-info">info</th>
            <th class="table-warning">warning</th>
            <th class="table-danger">danger</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
            <td class="table-active">active</td>
            <td class="table-primary">primary</td>
            <td class="table-success">success</td>
            <td class="table-info">info</td>
            <td class="table-warning">warning</td>
            <td class="table-danger">danger</td>
        </tr>
    </tbody>
</table>

使用 .table-responsive 包裹表格，在小屏幕上出现水平滚动条。

长长长长长长长长长长长长	长长长长长长长长长长长长	长长长长长长长长长长长长	长长长长长长长长长长长长	长长长长长长长长长长长长	长长长长长长长长长长长长

<div class="table-responsive">
    <table class="table table-bordered table-sm table-striped table-hover">
        <tr>
            <td class="nobr">长长长长长长长长长长长长</td>
            <td class="nobr">长长长长长长长长长长长长</td>
            <td class="nobr">长长长长长长长长长长长长</td>
            <td class="nobr">长长长长长长长长长长长长</td>
            <td class="nobr">长长长长长长长长长长长长</td>
            <td class="nobr">长长长长长长长长长长长长</td>
        </tr>
    </table>
</div>

Ting Web UI

表格

基础表格

隔行变色

边框表格

鼠标悬停

表头样式

反转色表头

浅色表头

紧凑表格

语境色

表格语境色

行语境色

单元格语境色

响应式表格