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