PC端和移动端的两款响应式列表样式

兼容PC端和移动端的两款响应式表格样式，自适应屏幕尺寸，可以点击按钮自由切换显示的效果，表格里的内容可以自由增加和删除，颜色、字体大小等样式也可以自由调整，喜欢的请直接收下哦。

分类：css3 > table 难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分需引入多个CSS样式文件，代码如下：

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link type="text/css" rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link type="text/css" rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分只需要把table放置在div容器里，代码如下：

<div class="wrap">
    <div class="btn-toolbar buttons">
      <div class="btn-group">
        <button id="desktop" class="btn btn-primary">
        <i class="fa fa-desktop" aria-hidden="true"></i>
        PC端表格
      </button>
      </div>
      <div class="btn-group">
        <button id="mobile" class="btn btn-default">
        <i class="fa fa-mobile-phone" aria-hidden="true"></i>
        移动端表格
      </button>
      </div>
    </div>
    <div class="table-wrapper">
      <table class="table-responsive card-list-table">
        <thead>
          <tr>
            <th>秘密 #1</th>
            <th>秘密 #2</th>
            <th>秘密 #3</th>
            <th>秘密 #4</th>
            <th>秘密 #5</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td data-title="秘密 #1">吸引力 #1</td>
            <td data-title="秘密 #2">吸引力 #2</td>
            <td data-title="秘密 #3">吸引力 #3</td>
            <td data-title="秘密 #4">吸引力 #4</td>
            <td data-title="秘密 #5">吸引力 #5</td>
          </tr>
          <tr>
            <td data-title="秘密 #1">吸引力 #1</td>
            <td data-title="秘密 #2">吸引力 #2</td>
            <td data-title="秘密 #3">吸引力 #3</td>
            <td data-title="秘密 #4">吸引力 #4</td>
            <td data-title="秘密 #5">吸引力 #5</td>
          </tr>
          <tr>
            <td data-title="秘密 #1">吸引力 #1</td>
            <td data-title="秘密 #2">吸引力 #2</td>
            <td data-title="秘密 #3">吸引力 #3</td>
            <td data-title="秘密 #4">吸引力 #4</td>
            <td data-title="秘密 #5">吸引力 #5</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

页面的底部引入jQuery库和其他两个javascript文件即可，代码如下：

<script type="text/javascript" src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script type="text/javascript" src='https://cdn.jsdelivr.net/jquery.floatthead/1.4.2/jquery.floatThead.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>