最近在学习的过程中发现一个比较有趣的内容,今天来分享给大家,利用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>
最后,这样可以自适应的表格就完成了,如果不喜欢这样的一个表格颜色,你也可以自定义自己喜欢的颜色和风格。