最近在学习的过程中发现一个比较有趣的内容，今天来分享给大家，利用HTML+CSS制作可以自适应的数据表格，个人感觉还是比较实用的。
当我们调整页面比例，或者在不同屏幕尺寸的设备上(PC，手机)尝试浏览器本页，你会发现下面的表格呈现出自适应布局特征，能够自动的使用不同的屏幕尺寸，数据的表现不会因为屏幕大小变化而变得不合适。
数据表格如下图：
我们先来简单分析一下这张表格，表格的头部采用了隔列换色的形式，表格的行也采用斑马式的交替颜色，当然这些都是为了方便我们读取表格里的内容，通过CSS样式自己定义即可。它最特别的地方在于可以根据当前页面的缩放比例进行自适应，当页面缩小到一定范围时，表头将以行的形式固定，当页面放大到一定范围时，会出现滚动条，我们可以拖动滚动条来浏览表格里的数据。
页面缩小：
页面放大：
那这样一个可以自适应的数据表格是如何完成的呢？
首先，我们要用HTML来创建这样一个表格，
thead创建5列的表头，
tbody创建10行5列的表格，
具体如何创建表格的，代码可以参考如下：
<divclass="table-wrapper"><tableclass="fl-table"><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th></tr></thead><tbody><tr><td>1</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr><tr><td>2</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr><tr><td>3</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr><tr><td>4</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr><tr><td>5</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr><tr><td>6</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr><tr><td>7</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr><tr><td>8</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr><tr><td>9</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr><tr><td>10</td><td>Content</td><td>Content</td><td>Content</td><td>Content</td></tr><tbody></table></div>
接下来就是最关键的CSS部分，就是这张表格最核心的地方，
它的原理是：即当屏幕小于767像素时，表格就会自适应，多的隐藏可以滚动，
具体CSS样式部分代码该如何写，可以参考如下代码：
<style> * { box-sizing: border-box; box-sizing: border-box; box-sizing: border-box; } body { font-family: Helvetica; font-smoothing: antialiased; background: rgba( 71, 147, 227, 1); } h2 { text-align: center; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; color: white; padding: 30px0; } /* Table Styles */.table-wrapper { margin: 10px70px70px; box-shadow: 0px35px50pxrgba( 0, 0, 0, 0.2); } .fl-table { border-radius: 5px; font-size: 12px; font-weight: normal; border: none; border-collapse: collapse; width: 100%; max-width: 100%; white-space: nowrap; background-color: white; } .fl-tabletd, .fl-tableth { text-align: center; padding: 8px; } .fl-tabletd { border-right: 1pxsolid#f8f8f8; font-size: 12px; } .fl-tabletheadth { color: #ffffff; background: #4FC3A1; } .fl-tabletheadth:nth-child(odd) { color: #ffffff; background: #324960; } .fl-tabletr:nth-child(even) { background: #F8F8F8; } /* Responsive */@media (max-width: 767px) { .fl-table { display: block; width: 100%; } .table-wrapper:before { content: "Scroll horizontally >"; display: block; text-align: right; font-size: 11px; color: white; padding: 0010px; } .fl-tablethead, .fl-tabletbody, .fl-tabletheadth { display: block; } .fl-tabletheadth:last-child { border-bottom: none; } .fl-tablethead { float: left; } .fl-tabletbody { width: auto; position: relative; overflow-x: auto; } .fl-tabletd, .fl-tableth { padding: 20px.625em.625em.625em; height: 60px; vertical-align: middle; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; width: 120px; font-size: 13px; text-overflow: ellipsis; } .fl-tabletheadth { text-align: left; border-bottom: 1pxsolid#f7f7f9; } .fl-tabletbodytr { display: table-cell; } .fl-tabletbodytr:nth-child(odd) { background: none; } .fl-tabletr:nth-child(even) { background: transparent; } .fl-tabletrtd:nth-child(odd) { background: #F8F8F8; border-right: 1pxsolid#E6E4E4; } .fl-tabletrtd:nth-child(even) { border-right: 1pxsolid#E6E4E4; } .fl-tabletbodytd { display: block; text-align: center; } } </style>
最后，这样可以自适应的表格就完成了，如果不喜欢这样的一个表格颜色，你也可以自定义自己喜欢的颜色和风格。
