html - 根据屏幕尺寸更改 HTML 表格结构

Question

假设我有一个 3x2 HMTL 表:

 <table>
  <tr>
    <td> <div id="content1"></div> </td>
    <td> <div id="content2"></div> </td>
    <td> <div id="content3"></div> </td>
  </tr>
  <tr>
    <td> <div id="content4"></div> </td>
    <td> <div id="content5"></div> </td>
    <td> <div id="content6"></div> </td>
  </tr>
 </table>

当屏幕处于横向模式时这很好(即 ​​- width > height)

假设 height > width，有没有办法动态将表格更改为以下 2x3 表格:

 <table>
  <tr>
    <td> <div id="content1"></div> </td>
    <td> <div id="content2"></div> </td>
  </tr>
  <tr>
    <td> <div id="content3"></div> </td>
    <td> <div id="content4"></div> </td>
  </tr>
  <tr>
    <td> <div id="content5"></div> </td>
    <td> <div id="content6"></div> </td>
  </tr>
 </table>

Answer 1

<table>
<tr>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
</tr>
<tr>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
 <td>Lorem ipsum</td>
</tr>

table {
 display:flex;
 flex-wrap:wrap;
 width:90%;
 margin:0 auto;
}

tr {
 flex:1 0 300px;
 display:inline;
}

td {
 display:inline-block;
 width:100px;
 height:100px;
}

https://jsfiddle.net/cmckay/02tvkyj8/

http://autoprefixer.github.io/