如何像网格一样设置表格的样式？答案

【问题标题】：How to style a table like a grid?如何像网格一样设置表格的样式？
【发布时间】：2018-05-27 22:44:37
【问题描述】：

如何使用 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>

非常感谢任何帮助，谢谢:)

【问题讨论】：

您绝对有必要使用flex-box吗？
@Baro 不，什么都行
然后在单元格中使用背景图片。
@MrLister 它不能是图像，我的意思是它不一定是 flexbox 可以是旧的 CSS
你听说过 CSS Grid 布局吗？ :-) 虽然我想如果你想无限地添加更多的行/列，它可能不是最好的解决方案......

标签： html css

【解决方案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>

【讨论】：