利用display属性写出表格的布局样式

本文主要是介绍利用display属性写出表格的布局样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

demo地址：http://codepen.io/tianzi77/pen/gpBzjy

元素结构：

   <h1>display构造的table小例子，IE8及以下浏览器不支持本示例</h1><div class="table"><h2 class="table-caption">大神榜：</h2><div class="table-column-group"><div class="table-column"></div><div class="table-column"></div><div class="table-column"></div><div class="table-column"></div><div class="table-column"></div><div class="table-column"></div></div><div class="table-header-group"><ul class="table-row"><li class="table-cell">序号</li><li class="table-cell">姓名</li><li class="table-cell">年龄</li><li class="table-cell">工作</li><li class="table-cell">学校</li><li class="table-cell">家庭</li></ul></div><div class="table-footer-group"><ul class="table-row"><li class="table-cell">holi</li><li class="table-cell">holi</li><li class="table-cell">holi</li><li class="table-cell">holi</li><li class="table-cell">holi</li><li class="table-cell">holi</li></ul></div><div class="table-row-group"><ul class="table-row"><li class="table-cell">1</li><li class="table-cell">云淡然</li><li class="table-cell">27</li><li class="table-cell">test</li><li class="table-cell">test</li><li class="table-cell">test</li></ul><ul class="table-row"><li class="table-cell">2</li><li class="table-cell">刚师傅</li><li class="table-cell">27</li><li class="table-cell">test</li><li class="table-cell">test</li><li class="table-cell">test</li></ul><ul class="table-row"><li class="table-cell">3</li><li class="table-cell">草珊瑚</li><li class="table-cell">27</li><li class="table-cell">test</li><li class="table-cell">test</li><li class="table-cell">test</li></ul><ul class="table-row"><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li></ul><ul class="table-row"><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li></ul><ul class="table-row"><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li></ul><ul class="table-row"><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li><li class="table-cell">hl</li></ul></div></div>

样式：

       body {font: 14px/1.5 georgia, simsun, arial;}h1 {margin: 10px 0;font-size: 20px;margin-top: 3em;}ul {margin: 0;padding: 0;list-style: none;}.table {display: table;border-collapse: collapse;border: 1px solid #ccc; //相当于table标签}.table-caption {display: table-caption;margin: 0;padding: 0;font-size: 16px; //相当于caption标签}.table-column-group {display: table-column-group; //相当于colgroup标签}.table-column {display: table-column;width: 100px; //制定对象作为表格列，相当于col标签}.table-row-group {display: table-row-group; //指定对象作为表格行组。类同于html标签<tbody>}.table-row {display: table-row; //指定对象作为表格行。类同于html标签<tr>}.table-row-group .table-row:hover,.table-footer-group .table-row:hover {background: #abcdef;}.table-cell {display: table-cell;padding: 0 5px;border: 1px solid #ccc; //指定对象作为表格单元格。类同于html标签<td>}.table-header-group {display: table-header-group;background: #eee;font-weight: bold; //指定对象作为表格标题组。类同于html标签<thead>}.table-footer-group {display: table-footer-group; //指定对象作为表格脚注组。类同于html标签<tfoot>}.tianzi{width: 100px;height: 100px;background: #abcdef;}.haoli{width: 500px;height: 500px;background-color: aqua;}

很多时候项目不让用表格写代码，然后这个就显示出了他强大的功能。

这篇关于利用display属性写出表格的布局样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---