转载：http://caibaojian.com/relative-responsive-table
需求分析
该样式的主要需求分析是这样子的：一个表格，有很多列内容，超出了屏幕的最大宽度，如果不做处理的情况下，浏览器会多出一个滚动条，所以我们需要改为没有滚动条，同时可以查看表格的内容。这个常常叫自适应。我之前也写过一篇文章详细的介绍了网络上大多数的自适应表格方法：响应式表格,HTML表格自适应（responsive table）
代码思路
首先左边的第一列是数据的名称，那么滚动的时候这一列最好不随着滚动条拉动而滚动，他会清晰的显示了右边是什么内容。
所以我们分成两部分：一部分是第一列的数据名称，另一部分是数据列表。
左边的数据采用固定宽度或者相对宽度，使用绝对定位浮动在一个地方。
右边则使用正常流，距离左边的宽度等于上面的，这样子右边的整体内容就是一个正常流，我们在里面再嵌套一个div，那么他就是100%的宽度，超出就会隐藏了。
实现代码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>responsive table by caibaojian.com</title>
</head>
<body>
<div class="table-two">
<div class="table-first">
<table>
<thead>
<tr>
<th>统计项</th>
</tr>
</thead>
<tbody>
<tr>
<td>所有用户</td>
</tr>
<tr>
<td>苹果用户</td>
</tr>
<tr>
<td>安卓用户</td>
</tr>
<tr>
<td>亲友账户</td>
</tr>
<tr>
<td>记录发送</td>
</tr>
<tr>
<td>二代绑定</td>
</tr>
<tr>
<td>一代绑定</td>
</tr>
<tr>
<td>二代上传</td>
</tr>
<tr>
<td>一代上传</td>
</tr>
<tr>
<td>上传条数</td>
</tr>
<tr>
<td>活跃用户</td>
</tr>
</tbody>
</table>
</div>
<div class=" table-second">
<div class="table-container">
<table>
<thead>
<tr>
<th>今天数</th>
<th>昨天数</th>
<th>本周数</th>
<th>上周数</th>
<th>本月数</th>
<th>上月数</th>
<th>最近6个月</th>
<th>总共</th>
<th>上传记录最多的用户</th>
<th>此用户共上传数据</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">10</td>
<td align="center">2</td>
<td align="center">15</td>
<td align="center">54</td>
<td align="center">141</td>
<td align="center">210</td>
<td align="center">738</td>
<td align="center">12197</td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">2</td>
<td align="center">14</td>
<td align="center">36</td>
<td align="center">65</td>
<td align="center">116</td>
<td align="center">116</td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">9</td>
<td align="center">2</td>
<td align="center">13</td>
<td align="center">32</td>
<td align="center">86</td>
<td align="center">105</td>
<td align="center">213</td>
<td align="center">213</td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">32</td>
<td align="center">44</td>
<td align="center">16</td>
<td align="center">97</td>
<td align="center">135</td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">0</td>
<td align="center">5</td>
<td align="center">5</td>
<td align="center">14</td>
<td align="center">35</td>
<td align="center">131</td>
<td align="center">416</td>
<td align="center">5857</td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">3</td>
<td align="center">6</td>
<td align="center">16</td>
<td align="center">32</td>
<td align="center">11</td>
<td align="center">47</td>
<td align="center">47</td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">0</td>
<td align="center">2</td>
<td align="center">13</td>
<td align="center">30</td>
<td align="center">15</td>
<td align="center">150</td>
<td align="center">200</td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">6</td>
<td align="center">10</td>
<td align="center">14</td>
<td align="center">48</td>
<td align="center">82</td>
<td align="center">84</td>
<td align="center">141</td>
<td align="center">141</td>
<td align="center"></td>
<td align="center">815</td>
</tr>
<tr>
<td align="center">6</td>
<td align="center">6</td>
<td align="center">10</td>
<td align="center">25</td>
<td align="center">50</td>
<td align="center">42</td>
<td align="center">105</td>
<td align="center">105</td>
<td align="center">xiangyun_80</td>
<td align="center">1740</td>
</tr>
<tr>
<td align="center">1613</td>
<td align="center">1563</td>
<td align="center">4427</td>
<td align="center">10735</td>
<td align="center">35808</td>
<td align="center">72077</td>
<td align="center">144327</td>
<td align="center">244153</td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">7</td>
<td align="center">20</td>
<td align="center">24</td>
<td align="center">64</td>
<td align="center">64</td>
<td align="center"></td>
<td align="center"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>css
@charset "utf-8";
*{margin:0; padding:0; border:0;}
table{border-collapse:collapse; border-spacing:0; border:0;width:100%;}
table tr td, table tr th{border:1px solid #999; padding:.5em 1em; white-space:nowrap;}
.table-first tr th, .table-first tr td{background:#F4F4F4; font-weight:bold;}
.table-container table tr td, .table-container tr th{border:0; border-bottom:1px solid #999; border-right:1px solid #999; text-align:center;}
.table-container table{border:1px solid #999; border-left:0;}
.table-two{position:relative;}
/*左边内容是表头名的宽度，根据实际情况而定,你也可以使用百分比*/
.table-first{position:absolute; left:0; top:0; width:102px;/*width:20%;*/}
/*距离左边表头的内容宽度*/
.table-second{padding-left:102px;/*width:20%*/}
/*超出部分出现滚动条*/
.table-container{width:100%; overflow-y:auto; _overflow:auto;margin: 0 0 10px;}
/*IOS滚动条*/
.table-container::-webkit-scrollbar
{
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.table-container::-webkit-scrollbar-thumb
{
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}效果：
