两张宽100％的桌子;在宽屏幕上一行;在狭窄的屏幕上两行

Question

我有两张桌子。

• 在宽屏幕上，表格应该在一行中。
• 在狭窄的屏幕上，如有必要，第二张表可以换行到下一行。

在下面的示例中可以轻松完成。但是，我也希望在这两种情况下，表格都会占据屏幕宽度的100％。

• 在宽屏幕上，两张桌子应该一起宽度为100％。
• 在窄屏幕上，每行中每张表的宽度应为100％。

https://jsfiddle.net/kkco4syr/

<table style="display: inline-table">
  <tr><th>A Lorem Ipsum</th><th>B Lorem Ipsum</th></tr>
  <tr><td>C Lorem Ipsum</td><td>D Lorem Ipsum</td></tr>
</table>
 <table style="display: inline-table">
  <tr><th>E Lorem Ipsum</th><th>F Lorem Ipsum</th></tr>
  <tr><td>G Lorem Ipsum</td><td>H Lorem Ipsum</td></tr>
</table>

Answer 1

你没有尝试过bootstrap表吗？ Bootstrap Table