通过div模拟table
参考:
https://css-tricks.com/complete-guide-table-element/
不要使用内联样式,但只是为了了解这里是如何去:
<section style="display: table;"> <header style="display: table-row;"> <div style="display: table-cell;"></div> <div style="display: table-cell;"></div> <div style="display: table-cell;"></div> </header> <div style="display: table-row;"> <div style="display: table-cell;"></div> <div style="display: table-cell;"></div> <div style="display: table-cell;"></div> </div> </section>
这里的一个简单的技巧是,如果你不需要的话,你甚至不需要表行元素.。一组显示:表单元格;元素是显示的子元素:表;元素将表现为它们都在同一行中。
您总是更改元素的显示属性,以获取表样式行为.
display: table /* <table> */
display: table-cell /* <td> */
display: table-row /* <tr> */
display: table-column /* <col> */
display: table-column-group /* <colgroup> */
display: table-footer-group /* <tfoot> */
display: table-header-group /* <thead> */