Bootstrap<表格>

最新推荐文章于 2025-10-12 09:33:29 发布

原创最新推荐文章于 2025-10-12 09:33:29 发布 · 607 阅读

1 ·

CC 4.0 BY-SA版权

Bootstrap 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Bootstrap框架中的表格组件，包括基础表格、斑马线表格、带边框表格等五种样式及响应式表格，并详细讲解了如何使用这些表格样式。

表格

表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。

刚已经说了，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

☑ .table：基础表格

☑ .table-striped：斑马线表格

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

表格--基础表格

大家对表格并不太陌生，但对于Bootstrap中的表格如何使用，或许还有点陌生，接下来的内容，将根据不同的表格类型向大家介绍Bootstrap表格的实际使用方法。
对表格的结构，跟我们平时使用表格是一样的：

<table>
<thead>
<tr>
<th>表格标题</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
…
</tr>
     …
</tbody>
</table>

如无特别声明，下面介绍表格类型的时候，结构都是类似上面的代码。
基础表格
在Bootstrap中，对于基础表格是通过类名“.table”来控制。如果在<table>元素中不添加任何类名，表格是无任何样式效果的。想得到基础表格，我们只需要在<table>元素上添加“.table”类名，就可以得到Bootstrap的基础表格：

<table class="table">
…
</table>

Bootstrap的基础表格，大致长得像下图所示的样子：

主要源码查看bootstrap.css文件第1402行～第1441行，由于代码太长，此处不一一列举。

“.table”主要有三个作用：

☑ 给表格设置了margin-bottom:20px以及设置单元内距

☑ 在thead底部设置了一个2px的浅灰实线

☑ 每个单元格顶部设置了一个1px的浅灰实线

<!DOCTYPE HTML>
<html>
<head>
<style>
body{
margin:20px;
}
.table {
margin-bottom:20px;
line-height: 2;
color:#900;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>基础表格</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<table class="table" border="1px" style="border-collapse:collapse">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
</body>
</html>