html - 表格以及如何管理数据

Question

我有一张 table :

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

我希望单元格以特定宽度断开，以便显示:

1 2
3 4

我尝试使用 td:nth-child()，但无法更改 td 的颜色或让它们全部垂直。

感谢您的帮助

Answer 1

根据需要调整屏幕大小，目前设置为 768px

HTML:

<table>
  <tr class="row1">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="row2">
    <td>3</td>
    <td>4</td>
  </tr>
</table>

CSS:

@media (min-width: 768px) { 
  tr {
    display: inline-block;
  }
}

@media (max-width: 767px) { 
  tr {
    display: block;
  }
}