响应式表格,HTML表格自适应（responsive table）

前面的一篇文章里面我介绍到了一种简单的自适应表格制作方案，就是通过给表格的外面加了一个.table-container的标签

.table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; } table{border:0; border-collapse:collapse;} table td,table th{border:1px solid #999; padding:.5em 1em} //添加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); }

bootstrap3自适应表格

Bootstrap3.0也类似这样子的简单自适应，当屏幕小于767像素时，表格就会自适应，多的隐藏可以滚动。

//code from http://caibaojian.com/responsive-tables.html @media (max-width: 767px) { .table-responsive { width: 100%; margin-bottom: 15px; overflow-x: scroll; overflow-y: hidden; border: 1px solid #dddddd; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } .table-responsive > .table { margin-bottom: 0; } .table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td { white-space: nowrap; }