如何像网格一样设置表格？

Question

如何使用vanilla CSS构建类似的东西并使其灵活，以便在我添加更多或更少的列/行时不会中断？

这就是我现在所拥有的，但它似乎不对......

table {
  display: flex;
  flex: 1;
  width: 100%;
}
th {
  transform: rotate(-90deg);
}
th:after {
  content: '';
  display: inline-block;
  padding-bottom: 130px;
}

td:first-child {
  width: 200px;
}

<table>
  <tr><th>column one</th><th>column two</th><th>column three</th></tr>
  <tr><td>row one</td><td>c</td><td>c</td><td>c</td></tr>
  <tr><td>row two</td><td>c</td><td>c</td><td>c</td></tr>
</table>

非常感谢任何帮助，谢谢：）

Answer 1

我认为您正在寻找此解决方案：JSFiddle

感谢Stack Overflow用户获得grid backgrund

的非常好的答案

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  /* https://stackoverflow.com/a/25709375/4031083 */
  background: linear-gradient(-90deg, rgba(0, 0, 0, .05) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px), linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px), linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 98px, transparent 98px), linear-gradient(-90deg, #aaa 1px, transparent 1px), linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 98px, transparent 98px), linear-gradient(#aaa 1px, transparent 1px), #f2f2f2;
  background-size: 10px 10px, 10px 10px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px;
}

table {
  border-collapse: collapse;
  background-color: transparent;
}

tr {
  height: 20px;
}

td {
  box-sizing: border-box;
  width: 100px;
  border-collapse: collapse;
  text-align: center;
}

th {
  box-sizing: border-box;
  height: 120px;
  transform: rotate(-90deg);
}

td:first-child,
th:first-child {
  width: 100px;
  text-align: left;
}

/* COLOR ROW/CELL */

td {
  background-color: #ff00ff30;
}

td:nth-child(odd) {
  background-color: #00ffff30;
}

/* COLOR ROW/CELL */

tr:nth-child(odd) td {
  background-color: #ff000040;
}

tr:nth-child(odd) td:nth-child(odd) {
  background-color: #00ff0040;
}

<table>
  <tr class="head">
    <th></th>
    <th>column one</th>
    <th>column two</th>
    <th>column three</th>
  </tr>
  <tr>
    <td>row one</td>
    <td>c</td>
    <td>c</td>
    <td>c</td>
  </tr>
  <tr>
    <td>row two</td>
    <td>c</td>
    <td>c</td>
    <td>c</td>
  </tr>
</table>