創建響應表

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代碼，並檢查現場。