javascript - 为小屏幕合并表格单元格

Question

对于大屏幕，我有这样的东西:

<table>
    <thead>
        <tr>
            <th>title and image</th>
            <th>description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                title
                <br /><img scr="">
            </td>
            <td>
                few words about...
            </td>
        </tr>
    </tbody>
</table>

我想将其更改为以下代码以适应较小的屏幕:

<table>
    <thead>
        <tr>
            <th>title and description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                title
                <br />few words about...
            </td>
        </tr>
    </tbody>
</table>

你知道如何正确地做到这一点吗？ :) 我只想用 CSS 来做，但我也可以用 PHP 和 JS 编写代码。

谢谢大家，祝你有美好的一天!

Answer 1

您可以 - 在媒体查询中 - 使用此 CSS 将行转换为单元格并将单元格转换为简单的内联元素:

tr {
  display: table-cell;
}

td {
  display: inline;
}

<table>
  <thead>
    <tr>
      <th>title and image</th>
      <th>description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        title
        <br /><img scr="">
      </td>
      <td>
        few words about...
      </td>
    </tr>
  </tbody>
</table>