我已经创建了一个这样的表
+---------------+
| 1 | 2 | 3 | 4 |
+---+---+---+---+
| 5 | 6 | 7 | 8 |
+---+---+---+---+
| 9 | 10| 11| 12|
+---+---+---+---+
| 13| 14| 15| 16|
+---+---+---+---+
当我将浏览器调整为平板电脑大小时,它应该是这样的-
+----------+
| 1 | 2 | 3 |
+---+---+---+
| 4 | 5 | 6 |
+---+---+---+
| 7 | 8 | 9 |
+---+---+---+
| 10| 11| 12|
+---+---+---+
有可能吗?
最佳答案
您不能使用 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 文档中并实时检查。
关于html - 创建响应表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36662075/