CSS - 表格样式

Question

我需要像this这样的表格样式，它必须有响应，这可能吗？

• 边界空间很重要，它们应该是4px / 640px

Answer 1

＆＃13;

＆＃13;

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";
  }
};

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

找到这条路径，以获得关于表css的全部知识

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