合并小屏幕的表格单元格答案

【问题标题】：Merge table cells for small screen合并小屏幕的表格单元格
【发布时间】：2017-08-09 19:12:27
【问题描述】：

我有这样的大屏幕：

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

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

【问题讨论】：

PHP 是一种仅限服务器端的语言。您可以让它应用适当的样式表，但您的问题确实与 CSS/HTML 相关。
如果您只是根据屏幕宽度显示/隐藏元素，您可以轻松摆脱所有 css.. 但看起来您在这里重新排列了一些 html.. 您必须添加额外的在较大宽度上隐藏而在较小宽度上可见的元素。反之亦然，宽度较小的元素可以在这里摆脱所有 css.. 排序会变得混乱.. 可能是更好的方法.. 稍微修复一下 html，它可以为你解决
继续 Rick 所说的，请考虑以下内容。（现在正在处理）

标签： javascript html css responsive-design html-table

【解决方案1】：

有一个名为 media query 的 css 功能允许您根据显示的属性有条件地应用 css 规则。例如，它可以与min-width(700px) 之类的条件一起用于定位大屏幕，而max-width(320px) 之类的条件则用于小屏幕。

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

CSS：

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

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

HTML：

<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>

【讨论】：

【解决方案2】：

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

<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>

【讨论】：

不要。我一直对自己说同样的话。知道代码和知道什么是解决问题的最佳和更简单的方法是有区别的。我经常简化我写的代码，思考为什么我之前没有想到这一点。

【解决方案3】：

您可以 - 在媒体查询中 - 使用此 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>

【讨论】：