手风琴效果 手机版特有(也可带边框.table-bordered)
姓名
性别
年龄
身高(cm)
体重(kg)
操作
张三
男
23
183
75
删除
李四
男
25
183
75
删除
王五
男
24
183
75
删除
在手机版中 div.thead 是必须的，并且依赖div.tr
手机版改变第一列: thead 中加入data属性 data-title
data-title 的值为table 中的第 (n-1) 列 td 

  
  <div class="table table_drop table-bordered">
    <div class="tr thead" data-title="3">
      <div class="td">姓名</div>
      <div class="td">性别</div>
      <div class="td">年龄</div>
      <div class="td">身高(cm)</div>
      <div class="td">体重(kg)</div>
      <div class="td">操作</div>
    </div>
    <div class="tr">
      <div class="td">张三</div>
      <div class="td">男</div>
      <div class="td">23</div>
      <div class="td">183</div>
      <div class="td">75</div>
      <div class="td">删除</div>
    </div>
    <div class="tr">
      <div class="td">李四</div>
      <div class="td">男</div>
      <div class="td">25</div>
      <div class="td">183</div>
      <div class="td">75</div>
      <div class="td">删除</div>
    </div>
    <div class="tr">
      <div class="td">王五</div>
      <div class="td">男</div>
      <div class="td">24</div>
      <div class="td">183</div>
      <div class="td">75</div>
      <div class="td">删除</div>
    </div>

  </div>
模拟表格 默认表格样式不带边框
应用名称
状态
操作
应用名称
状态
操作
应用名称1
状态1
删除
应用名称1
状态1
删除
应用名称2
状态1
删除
应用名称1
状态1
删除
应用名称3
状态1
删除
应用名称1
状态1
删除
应用名称4
状态1
删除
应用名称1
状态1
删除

    <div class="table">
      <div class="tr thead">
        <div class="td">应用名称</div>
        <div class="td">状态</div>
        <div class="td">操作</div>
        <div class="td">应用名称</div>
        <div class="td">状态</div>
        <div class="td">操作</div>
      </div>
      <div class="tr">
        <div class="td">应用名称1</div>
        <div class="td">状态1</div>
        <div class="td">删除</div>
        <div class="td">应用名称1</div>
        <div class="td">状态1</div>
        <div class="td">删除</div>
      </div>
      <div class="tr">
        <div class="td">应用名称2</div>
        <div class="td">状态1</div>
        <div class="td">删除</div>
        <div class="td">应用名称1</div>
        <div class="td">状态1</div>
        <div class="td">删除</div>
      </div>
      <div class="tr">
        <div class="td">应用名称3</div>
        <div class="td">状态1</div>
        <div class="td">删除</div>
        <div class="td">应用名称1</div>
        <div class="td">状态1</div>
        <div class="td">删除</div>
      </div>
      <div class="tr">
        <div class="td">应用名称4</div>
        <div class="td">状态1</div>
        <div class="td">删除</div>
        <div class="td">应用名称1</div>
        <div class="td">状态1</div>
        <div class="td td-right">删除</div>
      </div>
    </div>
模拟带边框 .table-bordered(依赖table)
First Name
Last Name
Username
Mark
Otto
@mdo
Jacob
Thornton
@fat
  
  <div class="table table-bordered">
    <div class="tr">
      <div class="td">First Name</div>
      <div class="td">Last Name</div>
      <div class="td">Username</div>
    </div>
    <div class="tr">
      <div class="td">Mark</div>
      <div class="td">Otto</div>
      <div class="td">@mdo</div>
    </div>
    <div class="tr">
      <div class="td">Jacob</div>
      <div class="td">Thornton</div>
      <div class="td">@fat</div>
    </div>
  </div>
模拟条纹状 .table-striped(依赖table)
First Name
Last Name
Username
Mark
Otto
@mdo
Jacob
Thornton
@fat
  
    <div class="table table-striped">
      <div class="tr">
        <div class="td">First Name</div>
        <div class="td">Last Name</div>
        <div class="td">Username</div>
      </div>
      <div class="tr">
        <div class="td">Mark</div>
        <div class="td">Otto</div>
        <div class="td">@mdo</div>
      </div>
      <div class="tr">
        <div class="td">Jacob</div>
        <div class="td">Thornton</div>
        <div class="td">@fat</div>
      </div>
    </div>
带thead的表格 .thead(依赖table tr)
First Name
Last Name
Username
Mark
Otto
@mdo
Jacob
Thornton
@fat
  
  <div class="table table-striped">
    <div class="tr thead">
      <div class="td">First Name</div>
      <div class="td">Last Name</div>
      <div class="td">Username</div>
    </div>
    <div class="tr">
      <div class="td">Mark</div>
      <div class="td">Otto</div>
      <div class="td">@mdo</div>
    </div>
    <div class="tr">
      <div class="td">Jacob</div>
      <div class="td">Thornton</div>
      <div class="td">@fat</div>
    </div>
  </div>
鼠标悬停 .table-hover
First Name
Last Name
Username
Mark
Otto
@mdo
Jacob
Thornton
@fat
  
  <div class="table table-hover">
    <div class="tr thead">
      <div class="td">First Name</div>
      <div class="td">Last Name</div>
      <div class="td">Username</div>
    </div>
    <div class="tr">
      <div class="td">Mark</div>
      <div class="td">Otto</div>
      <div class="td">@mdo</div>
    </div>
    <div class="tr">
      <div class="td">Jacob</div>
      <div class="td">Thornton</div>
      <div class="td">@fat</div>
    </div>
  </div>
基本边框表格 默认表格样式
应用名称 状态
内容 内容
内容 内容
内容 内容 

<div class="table-pannel">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>应用名称</th>
        <th>状态</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>
        内容
        </td>
        <td>
        内容
        </td>
      </tr>
      <tr>
        <td>
        内容
        </td>
        <td>
        内容
        </td>
      </tr>
      <tr>
        <td>
        内容
        </td>
        <td>
        内容
        </td>
      </tr>
    </tbody>
  </table>
</div>
无竖线表格 横线表格样式
应用名称 状态
内容 内容
内容 内容
内容 内容 

<div class="table-pannel">
  <table class="table">
    <thead>
      <tr>
        <th>应用名称</th>
        <th>状态</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>
        内容
        </td>
        <td>
        内容
        </td>
      </tr>
      <tr>
        <td>
        内容
        </td>
        <td>
        内容
        </td>
      </tr>
      <tr>
        <td>
        内容
        </td>
        <td>
        内容
        </td>
      </tr>
    </tbody>
  </table>
</div>
面板table 默认表格样式

默认样式面板

应用名称 状态
内容 内容
内容 内容
内容 内容 
  
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">
      默认样式面板
    </h3>
  </div>
  <div class="panel-body">
    
  <div class="panel-body-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>应用名称</th>
          <th>状态</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
          内容
          </td>
          <td>
          内容
          </td>
        </tr>
        <tr>
          <td>
          内容
          </td>
          <td>
          内容
          </td>
        </tr>
        <tr>
          <td>
          内容
          </td>
          <td>
          内容
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  
  </div>

</div>