CSS - 桌子造型

Question

我需要像this這樣的桌子樣式，它必須有反應，這可能嗎？

• 邊境空間是很重要的，他們應該是4像素/ 640像素

Answer 1

window.onresize = function() { 
 
    var x = document.getElementsByClassName("cell"); 
 
    var _size = document.getElementById("myTable").offsetWidth/160 + "px"; 
 
    for(var i = 0; i < x.length; i++) { 
 
    x[i].style.borderWidth = _size; 
 
    x[i].style.height = x[i].offsetWidth + "px"; 
 
    } 
 
};

table { 
 
\t width: 100%; 
 
\t border-collapse: collapse; 
 
} 
 
table td { 
 
\t width: 25%; 
 
\t border: 1px solid black; 
 
} 
 
table tr:first-child td { 
 
\t border-top: 0; 
 
} 
 
table tr:last-child td { 
 
\t border-bottom: 0; 
 
} 
 
table tr td:first-child { 
 
\t border-left: 0; 
 
} 
 
table tr td:last-child { 
 
\t border-right: 0; 
 
}

<table id="myTable"> 
 
    <tr> 
 
    <td class="cell">1</td> 
 
    <td class="cell">2</td> 
 
    <td class="cell">3</td> 
 
    <td class="cell">4</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell">5</td> 
 
    <td class="cell">6</td> 
 
    <td class="cell">7</td> 
 
    <td class="cell">8</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell">9</td> 
 
    <td class="cell">10</td> 
 
    <td class="cell">11</td> 
 
    <td class="cell">12</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell">13</td> 
 
    <td class="cell">14</td> 
 
    <td class="cell">15</td> 
 
    <td class="cell">16</td> 
 
    </tr> 
 
</table>

Answer 2

找到這條路徑來獲得表CSS的整個知識

https://css-tricks.com/complete-guide-table-element/