通过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>     */

转载于:https://www.cnblogs.com/guxingzhe/p/6289444.html