免费AI编程助手
Bootstrap 表格
2018-03-20 18:19 更新
HTML表格以网格格式呈现数据。
下表列出了Bootstrap支持的各种元素。
| 标签 | 描述 |
|---|---|
| <table> | 封装元素，用于以表格格式显示数据 |
| <thead> | 容器元素，用于标记表格列的表格标题行（<tr>） |
| <tbody> | 容器元素，用于表格主体中的表格行（<tr>） |
| <tr> | 容器元素，用于显示在单个行上的一组表格单元格（<td>或<th>） |
| <td> | 默认表格单元格 |
| <th> | 特殊表格单元格，用于标识列（或行，具体取决于范围和位置）。必须在<thead>内使用 |
| <caption> | 关于表格存储内容的描述或总结。 |
基础表格样式
如果你想要一个美观的、基础的表格样式，只带有一些浅的填充和水平分隔线，可添加.table的基类到任意表格。这些基本布局在所有<td>元素上都有顶部边框:
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>对于基础样式是：只有浅填充和水平分隔符 - 将基类.table添加到任意<table>。
边框表格
添加.table-bordered类为表格和其中的每个单元格增加边框。<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table table-bordered">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>紧缩表格
添加 .table-condensed类可以使表格更加紧凑，单元格中的内补（padding）均会减半。<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table table-condensed">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>上下文表格类
使用上下文表格类来对表格行或单个单元格设置颜色。
| 类 | 描述 |
|---|---|
| .success | 表示成功或正确的动作 |
| .danger | 表示危险或潜在的负面的动作 |
| .warning | 表示用户需要注意的警告 |
| .active | 将悬停颜色应用于特定的行或单元格 |
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table table-condensed">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr class="danger">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr class="active">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr class="warning">
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>悬停行
添加.table-hover以在<tbody>中的表格行上启用悬停状态。
<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table table-hover">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>条纹状表格
使用.table-striped在<tbody>中的任意表格行中添加斑马条纹样式。<!DOCTYPE HTML>
<html>
<head>
<link href="//www.w3cschool.cn/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">
<table class="table table-striped">
<caption>This is the caption.</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>响应式表格
我们可以创建响应式表格，以便在小屏幕设备（<768px）上启用滚动功能。<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Row ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>j@mail.com</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>p@mail.com</td>
<td>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque.</td>
</tr>
<tr>
<td>3</td>
<td>Tom</td>
<td>Smith</td>
<td>j@mail.com</td>
<td>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>以上内容是否对您有帮助：
更多建议：