响应式前端框架Bootstrap系列（4）表格

骑猪看日落 2021-09-14 14:00 390阅读 0赞

通过bs，可以很轻松地建出一个表格组件。以下是建表格组件必须认识的一些标签。

<table style="border-width:0px; margin:4px 0px; padding:0px; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','WenQuanYi Micro Hei',Arial,sans-serif; font-size:12px"> 
 <tbody style="border:0px; margin:0px; padding:0px"> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <th style="border-color:rgb(85,85,85); margin:0px; padding:3px; font-size:12px; color:rgb(255,255,255); background-color:rgb(85,85,85); vertical-align:top; text-align:left"> 标签</th> 
   <th style="border-color:rgb(85,85,85); margin:0px; padding:3px; font-size:12px; color:rgb(255,255,255); background-color:rgb(85,85,85); vertical-align:top; text-align:left"> 描述</th> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> &lt;table&gt;</td> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 为表格添加基础样式。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> &lt;thead&gt;</td> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 表格标题行的容器元素（&lt;tr&gt;），用来标识表格列。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> &lt;tbody&gt;</td> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 表格主体中的表格行的容器元素（&lt;tr&gt;）。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> &lt;tr&gt;</td> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 一组出现在单行上的表格单元格的容器元素（&lt;td&gt; 或 &lt;th&gt;）。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> &lt;td&gt;</td> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 默认的表格单元格。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> &lt;th&gt;</td> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 &lt;thead&gt; 内使用。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> &lt;caption&gt;</td> 
   <td style="border-color:rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 关于表格存储内容的描述或总结。</td> 
  </tr> 
 </tbody> 
</table>

<table>标签样式有以下几种：

.table 表格基本样式  
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)  
.table-bordered 为所有表格的单元格添加边框  
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态  
.table-condensed 让表格更加紧凑  
.table-responsive 可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

基本建表演示代码：

<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
    	<caption>基本的表格布局</caption>
    	<thead>
    		<tr>
    			<th>产品</th>
    			<th>付款日期</th>
    			<th>状态</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>产品1</td>
    			<td>23/11/2013</td>
    			<td>待发货</td>
    		</tr>
    		<tr>
    			<td>产品2</td>
    			<td>10/11/2013</td>
    			<td>发货中</td>
    		</tr>
    		<tr>
    			<td>产品3</td>
    			<td>20/10/2013</td>
    			<td>待确认</td>
    		</tr>
    		<tr>
    			<td>产品4</td>
    			<td>20/10/2013</td>
    			<td>已退货</td>
    		</tr>
    	</tbody>
    </table>

效果图：

![SouthEast][]

实际应用中，基本表格并不能满足需求，bs已经为我们考虑到了，我们还可以在<tr>,<th>和<td>添加色彩样式，实现类似于带状态的表格效果，色彩样式有以下几种：

.active 将悬停的颜色应用在行或者单元格上  
.success 表示成功的操作  
.info 表示信息变化的操作  
.warning 表示一个警告的操作  
.danger 表示一个危险的操作

演示代码：

<table class="table table-bordered table-condensed table-responsive">
    	<caption>带状态表格布局</caption>
    	<thead>
    		<tr>
    			<th>产品</th>
    			<th>付款日期</th>
    			<th>状态</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr class="active">
    			<td>产品1</td>
    			<td>23/11/2013</td>
    			<td>待发货</td>
    		</tr>
    		<tr class="success">
    			<td>产品2</td>
    			<td>10/11/2013</td>
    			<td>发货中</td>
    		</tr>
    		<tr class="warning">
    			<td>产品3</td>
    			<td>20/10/2013</td>
    			<td>待确认</td>
    		</tr>
    		<tr class="danger">
    			<td>产品4</td>
    			<td>20/10/2013</td>
    			<td>已退货</td>
    		</tr>
    	</tbody>
    </table>

效果图：

![SouthEast 1][]

[SouthEast]: /images/20210813/e1b845fbbcc44625816f5095cdfd09d7.png
[SouthEast 1]: /images/20210813/3e8c2b4f177e4908a2baf194376b37e3.png