05 - 文本样式之「表格类」
本帖最后由 不二如是 于 2023-6-20 16:38 编辑表格作为传统的 HTML 元素，一直受到 Web 开发者的青睐。
使用表格表示数据、制作调查表等应用在网络中屡见不鲜。
Bootstrap 提供了多种优雅的表格样式，而且可以让表格支持响应式布局，可谓非常实用。
基本的表格用法是在 <table> 元素上使用 .table 类：
<div class="container">
<table class="table">
<caption>鱼C考试成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>C语言</th>
<th>Python</th>
<th>Scratch</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<th>小甲鱼</th>
<td>99</td>
<td>100</td>
<td>98</td>
<td>297</td>
</tr>
<tr>
<th>小由鱼</th>
<td>28</td>
<td>16</td>
<td>15</td>
<td>59</td>
</tr>
<tr>
<th>小田鱼</th>
<td>26</td>
<td>22</td>
<td>12</td>
<td>60</td>
</tr>
<tr>
<th>小电鱼</th>
<td>16</td>
<td>22</td>
<td>16</td>
<td>54</td>
</tr>
<tr>
<th>小中鱼</th>
<td>25</td>
<td>11</td>
<td>12</td>
<td>48</td>
</tr>
<tr>
<th>小口鱼</th>
<td>15</td>
<td>8</td>
<td>9</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
效果：
如果没有 .container 容器包裹，默认会占满整个屏幕。
如果想实现斑马纹效果，则可以使用 .table-striped 类，仅修改上面代码中的 table 元素类：
<table class="table table-striped">
效果：
还可以继续添加 .table-bordered 类给单元格的所有边添加边框：
<table class="table table-striped table-bordered">
效果：
Bootstrap 能使网页实现响应式布局，表格也不例外。
通过 .table-responsive 类可以让表格支持响应式布局。
注意：
这个类不是应用在 <table> 元素上的，而是要作为 <table> 的父元素。
重新编写代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BootStrap5-图文教程</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
th {
min-width: 120px;
}
</style>
</head>
<body>
<div class="table-responsive text-nowrap">
<table class="table table-striped table-bordered">
<caption>鱼C考试成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>C语言</th>
<th>Python</th>
<th>Scratch</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<th>小甲鱼</th>
<td>99</td>
<td>100</td>
<td>98</td>
<td>297</td>
</tr>
<tr>
<th>小由鱼</th>
<td>28</td>
<td>16</td>
<td>15</td>
<td>59</td>
</tr>
<tr>
<th>小田鱼</th>
<td>26</td>
<td>22</td>
<td>12</td>
<td>60</td>
</tr>
<tr>
<th>小电鱼</th>
<td>16</td>
<td>22</td>
<td>16</td>
<td>54</td>
</tr>
<tr>
<th>小中鱼</th>
<td>25</td>
<td>11</td>
<td>12</td>
<td>48</td>
</tr>
<tr>
<th>小口鱼</th>
<td>15</td>
<td>8</td>
<td>9</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
效果：
.table-responsive 类使得表格可水平移动（添加滚动条），.text-nowrap 类的作用是让表格中的文字不换行显示。
因为成绩单表格的每个单元格宽度很小，所以这里将每列的宽度设置为 120px。
这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762
《小口鱼？ sfqxx 发表于 2023-6-18 19:11
《小口鱼？
{:10_307:} 学起来{:10_256:} sfqxx 发表于 2023-6-18 19:11
《小口鱼？
小铀鱼{:10_307:} 不二如是 发表于 2023-6-18 19:24
小由鱼（鱿鱼） 学起来 学起来 学起来 学起来
页:
[1]