BootStrap3--全局CSS之表格

曾经终败给现在 2021-08-14 02:19 380阅读 0赞

# 表格 #

## 基本实例 ##

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

<table>  Optional table caption.  
 <thead> 
  <tr> 
   <th>#</th> 
   <th>First Name</th> 
   <th>Last Name</th> 
   <th>Username</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>1</th> 
   <td>Mark</td> 
   <td>Otto</td> 
   <td>@mdo</td> 
  </tr> 
  <tr> 
   <th>2</th> 
   <td>Jacob</td> 
   <td>Thornton</td> 
   <td>@fat</td> 
  </tr> 
  <tr> 
   <th>3</th> 
   <td>Larry</td> 
   <td>the Bird</td> 
   <td>@twitter</td> 
  </tr> 
 </tbody> 
</table>

示例

## 条纹状表格 ##

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

#### 跨浏览器兼容性 ####

条纹状表格是依赖 `:nth-child` CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

<table> 
 <thead> 
  <tr> 
   <th>#</th> 
   <th>First Name</th> 
   <th>Last Name</th> 
   <th>Username</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>1</th> 
   <td>Mark</td> 
   <td>Otto</td> 
   <td>@mdo</td> 
  </tr> 
  <tr> 
   <th>2</th> 
   <td>Jacob</td> 
   <td>Thornton</td> 
   <td>@fat</td> 
  </tr> 
  <tr> 
   <th>3</th> 
   <td>Larry</td> 
   <td>the Bird</td> 
   <td>@twitter</td> 
  </tr> 
 </tbody> 
</table>

示例

## 带边框的表格 ##

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

示例

## 鼠标悬停 ##

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

示例

## 紧缩表格 ##

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

<table> 
 <thead> 
  <tr> 
   <th>#</th> 
   <th>First Name</th> 
   <th>Last Name</th> 
   <th>Username</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>1</th> 
   <td>Mark</td> 
   <td>Otto</td> 
   <td>@mdo</td> 
  </tr> 
  <tr> 
   <th>2</th> 
   <td>Jacob</td> 
   <td>Thornton</td> 
   <td>@fat</td> 
  </tr> 
  <tr> 
   <th>3</th> 
   <td colspan="2">Larry the Bird</td> 
   <td>@twitter</td> 
  </tr> 
 </tbody> 
</table>

示例

## 状态类 ##

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

<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>

<table> 
 <thead> 
  <tr> 
   <th>#</th> 
   <th>Column heading</th> 
   <th>Column heading</th> 
   <th>Column heading</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>1</th> 
   <td>Column content</td> 
   <td>Column content</td> 
   <td>Column content</td> 
  </tr> 
  <tr> 
   <th>2</th> 
   <td>Column content</td> 
   <td>Column content</td> 
   <td>Column content</td> 
  </tr> 
  <tr> 
   <th>3</th> 
   <td>Column content</td> 
   <td>Column content</td> 
   <td>Column content</td> 
  </tr> 
  <tr> 
   <th>4</th> 
   <td>Column content</td> 
   <td>Column content</td> 
   <td>Column content</td> 
  </tr> 
  <tr> 
   <th>5</th> 
   <td>Column content</td> 
   <td>Column content</td> 
   <td>Column content</td> 
  </tr> 
  <tr> 
   <th>6</th> 
   <td>Column content</td> 
   <td>Column content</td> 
   <td>Column content</td> 
  </tr> 
  <tr> 
   <th>7</th> 
   <td>Column content</td> 
   <td>Column content</td> 
   <td>Column content</td> 
  </tr> 
  <tr> 
   <th>8</th> 
   <td>Column content</td> 
   <td>Column content</td> 
   <td>Column content</td> 
  </tr> 
  <tr> 
   <th>9</th> 
   <td>Column content</td> 
   <td>Column content</td> 
   <td>Column content</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>

#### 向使用辅助技术的用户传达用意 ####

通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现，并不能为使用辅助技术 -- 例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的不同意义可以通过内容本身来表达（即在相应行或单元格中的可见的文本内容）；或者通过包含额外的方式 -- 例如应用了 `.sr-only` 类而隐藏的文本 -- 来表达出来。

## 响应式表格 ##

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

#### 垂直方向的内容截断 ####

响应式表格使用了 `overflow-y: hidden` 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。

#### Firefox 和 `fieldset` 元素 ####

Firefox 浏览器对 `fieldset` 元素设置了一些影响 `width` 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：

示例

@-moz-document url-prefix() { 
      fieldset {  display: table-cell; }
    }

<table> 
 <thead> 
  <tr> 
   <th>#</th> 
   <th>Table heading</th> 
   <th>Table heading</th> 
   <th>Table heading</th> 
   <th>Table heading</th> 
   <th>Table heading</th> 
   <th>Table heading</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>1</th> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
  </tr> 
  <tr> 
   <th>2</th> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
  </tr> 
  <tr> 
   <th>3</th> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
   <td>Table cell</td> 
  </tr> 
 </tbody> 
</table>

<div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>

示例