创建响应表

Question

我已创建这样

+---------------+ 
| 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| 
+---+---+---+ 

这是可能的吗？

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代码，并检查现场。