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将行转换为单元格，将单元格转换为简单的内联元素：

＆＃13;

tr {
  display: table-cell;
}

td {
  display: inline;
}

＆＃13;

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

＆＃13;

Answer 2

有一个名为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>

Answer 3

使用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 个答案: