Javascript 合并小屏幕的表格单元格

我在大屏幕上有这样的东西：

<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编写代码

---

谢谢大家，祝你们今天愉快

有一个称为的css功能，允许您根据显示的属性有条件地应用css规则。例如，它可以与

minwidth（700px）

等条件一起用于大屏幕，与

max width（320px）

等条件一起用于小屏幕

下面的方法在标记中会有重复，但是如果您使用PHP来呈现它，那么您可以通过将重复的标记存储在变量中并引用这些变量来减少重复的代码

CSS:

HTML:

标题和图像
描述
标题和说明
标题


关于…的几句话。。。
标题

关于。。。

有一个称为的css功能，允许您根据显示的属性有条件地应用css规则。例如，它可以与

minwidth（700px）

等条件一起用于大屏幕，与

max width（320px）

等条件一起用于小屏幕

下面的方法在标记中会有重复，但是如果您使用PHP来呈现它，那么您可以通过将重复的标记存储在变量中并引用这些变量来减少重复的代码

CSS:

HTML:

标题和图像
描述
标题和说明
标题


关于…的几句话。。。
标题

关于。。。

使用css媒体查询，在特定浏览器或屏幕宽度上方，显示“wideDisplay”和隐藏“窄显示”。当浏览器较小时，隐藏“宽显示”并显示“窄显示”

标题和图像
描述
标题和说明

使用css媒体查询，在特定浏览器或屏幕宽度上方，显示“wideDisplay”和隐藏“窄显示”。当浏览器较小时，隐藏“宽显示”并显示“窄显示”

标题和图像
描述
标题和说明

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

tr{
显示：表格单元格；
}
运输署{
显示：内联；
}

标题和图像
描述
标题


关于…的几句话。。。

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

tr{
显示：表格单元格；
}
运输署{
显示：内联；
}

标题和图像
描述
标题


关于…的几句话。。。

PHP是一种仅限于服务器端的语言。你可以让它应用适当的样式表，但是你的问题实际上是与CSS/HTML相关的。如果你只是根据屏幕宽度显示/隐藏元素，你可以轻松地避开所有CSS。。但是看起来您正在重新排列这里的一些html。。您必须添加在较大宽度上隐藏、在较小宽度上可见的其他元素。反之亦然，使用较小的宽度元素可以避开所有css。。但是那样会有点乱。。也许是更好的办法。。修正HTML一点，它可以根据瑞克所说的，在下面考虑。（目前正在研究）PHP是一种仅限于服务器端的语言。你可以让它应用适当的样式表，但是你的问题实际上是与CSS/HTML相关的。如果你只是根据屏幕宽度显示/隐藏元素，你可以轻松地避开所有CSS。。但是看起来您正在重新排列这里的一些html。。您必须添加在较大宽度上隐藏、在较小宽度上可见的其他元素。反之亦然，使用较小的宽度元素可以避开所有css。。但是那样会有点乱。。也许是更好的办法。。修正HTML一点，它可以根据瑞克所说的，在下面考虑。（现在正在做）不要。我总是对自己说同样的话。了解代码和了解解决问题的最佳和更简单的方法是什么之间有区别的。我经常简化我写的代码，思考为什么我之前没有想到这一点。我总是对自己说同样的话。知道代码和知道解决问题的最好和更简单的方法之间有区别。我经常简化我写的代码，思考为什么我之前没有想到这一点。

@media (min-width: 321px) {
    .small-screen {
        display: none;
    }
}

@media (max-width: 320px) {
    .large-screen {
        display: none;
    }
}

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

        <tr class="small-screen">
            <td>
                title
                <br />few words about...
            </td>
        </tr>
    </tbody>
</table>

<table>
<thead>
<tr>
<td class="wideDisplay">title and image</td>
<td class="wideDisplay">description</td >
<td class="narrowDisplay">title and description</td>
</tr>
</thead>
</table>