Bootstrap-全局css-表格

亦凉 2021-12-23 01:19 387阅读 0赞

# 表格 #

1.基本实例

为任意 `<table>` 标签添加 `.table` 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

2.条纹状表格

通过 `.table-striped` 类可以给 `<tbody>` 之内的每一行增加斑马条纹样式。

3.带边框的表格

添加 `.table-bordered` 类为表格和其中的每个单元格增加边框。

4.鼠标悬停

通过添加 `.table-hover` 类可以让 `<tbody>` 中的每一行对鼠标悬停状态作出响应。

5.紧缩表格

通过添加 `.table-condensed` 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

6.状态类

通过这些状态类可以为行或单元格设置颜色。

<table> 
 <thead> 
  <tr> 
   <th>Class</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th><code>.active</code></th> 
   <td>鼠标悬停在行或单元格上时所设置的颜色</td> 
  </tr> 
  <tr> 
   <th><code>.success</code></th> 
   <td>标识成功或积极的动作</td> 
  </tr> 
  <tr> 
   <th><code>.info</code></th> 
   <td>标识普通的提示信息或动作</td> 
  </tr> 
  <tr> 
   <th><code>.warning</code></th> 
   <td>标识警告或需要用户注意</td> 
  </tr> 
  <tr> 
   <th><code>.danger</code></th> 
   <td>标识危险或潜在的带来负面影响的动作</td> 
  </tr> 
 </tbody> 
</table>

<tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    <tr class="info">...</tr>
    
    
    <tr>
      <td class="active">...</td>
      <td class="success">...</td>
      <td class="warning">...</td>
      <td class="danger">...</td>
      <td class="info">...</td>
    </tr>

7.响应式表格

将任何 `.table` 元素包裹在 `.table-responsive` 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div