Bootstrap（四）：CSS--表格

1.基本表格 CSS-->.table

<table class="table">
 <thead>
    <td>#</td>
      <td>姓名</td>
      <td>国籍</td>
      <td>电话</td>
</thead>
<tbody>
  <tr>
      <td style="background-color: red">1</td>
      <td style="background-color: orange">Jack</td>
      <td style="background-color: blue">美国</td>
      <td style="background-color: yellow">123456789</td>
  </tr>
  <tr>
      <td>2</td>
      <td>张三</td>
      <td>中国</td>
      <td>987654321</td>
  </tr>
  <tr>
      <td>3</td>
      <td>村上</td>
      <td>日本</td>
      <td>987651234</td>
  </tr>
  <tr>
      <td>4</td>
      <td>托尔斯泰</td>
      <td>俄国</td>
      <td>987651234</td>
  </tr>
  <tr>
      <td>5</td>
      <td>雨果td>
      <td>法国</td>
      <td>987651234</td>
  </tr>
  </tbody>
</table>

2.条纹表格 CSS--> .table-striped

不被IE8支持

<table class="table table-striped">
 <thead>
    <td>#</td>
      <td>姓名</td>
      <td>国籍</td>
      <td>电话</td>
</thead>
<tbody>
  <tr>
      <td style="background-color: red">1</td>
      <td style="background-color: orange">Jack</td>
      <td style="background-color: blue">美国</td>
      <td style="background-color: yellow">123456789</td>
  </tr>
  <tr>
      <td>2</td>
      <td>张三</td>
      <td>中国</td>
      <td>987654321</td>
  </tr>
  <tr>
      <td>3</td>
      <td>村上</td>
      <td>日本</td>
      <td>987651234</td>
  </tr>
  <tr>
      <td>4</td>
      <td>托尔斯泰</td>
      <td>俄国</td>
      <td>987651234</td>
  </tr>
  <tr>
      <td>5</td>
      <td>雨果</td>
      <td>法国</td>
      <td>987651234</td>
  </tr>
  </tbody>
</table>

3.带边框的表格  CSS--> .table-border

 4.鼠标悬停 CSS--> .table-hover

<table class="table  table-hover  ">
 <thead>
    <td>#</td>
      <td>姓名</td>
      <td>国籍</td>
      <td>电话</td>
</thead>
<tbody>
  
  <tr>
      <td>1</td>
      <td>张三</td>
      <td>中国</td>
      <td>987654321</td>
  </tr>
  <tr>
      <td style="background-color: red">2</td>
      <td style="background-color: orange">Jack</td>
      <td style="background-color: blue">美国</td>
      <td style="background-color: yellow">123456789</td>
  </tr>
  <tr>
      <td>3</td>
      <td>村上</td>
      <td>日本</td>
      <td>987651234</td>
  </tr>
  <tr>
      <td>4</td>
      <td>托尔斯泰</td>
      <td>俄国</td>
      <td>987651234</td>
  </tr>
  <tr>
      <td>5</td>
      <td>雨果</td>
      <td>法国</td>
      <td>987651234</td>
  </tr>
  </tbody>
</table>

5.紧凑型表格 CSS-->.table-condensed

 添加该样式可以让表格显得更加紧凑，单元格中的内补(padding)均会减半。

<table class="table  table-hover  table-condensed">
 <thead>
    <td>#</td>
      <td>姓名</td>
      <td>国籍</td>
      <td>电话</td>
</thead>
<tbody>
  
  <tr>
      <td>1</td>
      <td>张三</td>
      <td>中国</td>
      <td>987654321</td>
  </tr>
  <tr>
      <td style="background-color: red">2</td>
      <td style="background-color: orange">Jack</td>
      <td style="background-color: blue">美国</td>
      <td style="background-color: yellow">123456789</td>
  </tr>
  <tr>
      <td>3</td>
      <td>村上</td>
      <td>日本</td>
      <td>987651234</td>
  </tr>
  <tr>
      <td>4</td>
      <td>托尔斯泰</td>
      <td>俄国</td>
      <td>987651234</td>
  </tr>
  <tr>
      <td>5</td>
      <td>雨果</td>
      <td>法国</td>
      <td>987651234</td>
  </tr>
  </tbody>
</table>

 6.响应式表格 CSS--> .table-responsive

用拥有该样式的<vid>将<table>包裹，当内容过多时，在小屏幕上显示时会出现滚动条，而在大屏幕上显示时滚动条不出现。

 大屏幕

小屏幕

<div class="table-responsive">
<table class="table  table-hover  ">
 <thead>
    <td>#</td>
      <td>姓名</td>
      <td>国籍</td>
      <td>电话</td>
</thead>
<tbody>
  
  <tr>
      <td>1</td>
      <td>张三</td>
      <td>中国</td>
      <td>987654321987654321987654321987654321987654321</td>
  </tr>
  <tr>
      <td style="background-color: red">2</td>
      <td style="background-color: orange">Jack</td>
      <td style="background-color: blue">美国</td>
      <td style="background-color: yellow">123456789</td>
  </tr>
  <tr>
      <td>3</td>
      <td>村上</td>
      <td>日本</td>
      <td>987651234</td>
  </tr>
  <tr>
      <td>4</td>
      <td>托尔斯泰</td>
      <td>俄国</td>
      <td>987651234</td>
  </tr>
  <tr>
      <td>5</td>
      <td>雨果</td>
      <td>法国</td>
      <td>987651234</td>
  </tr>
  </tbody>
</table>
</div>