创建响应式 table

Question

我已经创建了一个像这样的table

+---------------+
| 1 | 2 | 3 | 4 |
+---+---+---+---+
| 5 | 6 | 7 | 8 |
+---+---+---+---+
| 9 | 10| 11| 12|
+---+---+---+---+
| 13| 14| 15| 16|
+---+---+---+---+

当我将浏览器调整到 tablet 大小时，它应该是这样的-

 +----------+
| 1 | 2 | 3 |
+---+---+---+
| 4 | 5 | 6 | 
+---+---+---+
| 7 | 8 | 9 | 
+---+---+---+
| 10| 11| 12|
+---+---+---+

有可能吗？

Answer 1

您不能使用 table 标签创建。但是您可以使用 div 标签和 响应式 css 创建。这是您的答案：

.container {
  float: left;
  width: 100%;
  max-width: 204px;
  text-align: center;
  border-left: 1px dashed #000;
  border-top: 1px dashed #000;
}

.cell {
  float: left;
  width: 100%;
  max-width: 50px;
  border-right: 1px dashed #000;
  border-bottom: 1px dashed #000;
}

<div class="container">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">16</div>
</div>

将此 HTML 代码粘贴到您的 html 文档中并实时检查。

创建响应式 table

create responsive table

html

css

media-queries