html - 如何在移动/平板电脑 View 中在 css 的不同行上显示内容？

Question

我正在开发 Wordpress(基于自定义主题)website其中我想在移动 View 中的不同行上显示内容。

我在检查上述网站的某些内容时看到的HTML代码片段是:

HTML:

<div class="gv-table-view gv-table-container gv-table-multiple-container gv-container gv-container-2777">
    <table class="gv-table-view">
        <thead>
            <tr>
                <th id="gv-field-6-29" class="gv-field-6-29"><span class="gv-field-label"><a href="/knowledge-centre/quality-productivity-database/?sort=29&amp;dir=asc" class="gv-sort gv-icon-sort-asc"></a>&nbsp;Year Submitted</span>
                </th>
                <th id="gv-field-6-1" class="gv-field-6-1"><span class="gv-field-label"><a href="/knowledge-centre/quality-productivity-database/?sort=1&amp;dir=asc" class="gv-sort gv-icon-caret-up-down"></a>&nbsp;Descriptive Title of Proposal:</span>
                </th>
                <th id="gv-field-6-31" class="gv-field-6-31"><span class="gv-field-label"><a href="/knowledge-centre/quality-productivity-database/?sort=31&amp;dir=asc" class="gv-sort gv-icon-caret-up-down"></a>&nbsp;Name of Institution</span>
                </th>
                <th id="gv-field-6-25" class="gv-field-6-25"><span class="gv-field-label"><a href="/knowledge-centre/quality-productivity-database/?sort=25&amp;dir=asc" class="gv-sort gv-icon-caret-up-down"></a>&nbsp;Awarded</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="alt">
                <td id="gv-field-6-29" class="gv-field-6-29">2015</td>
                <td id="gv-field-6-1" class="gv-field-6-1"><a href="http://test.caubo.ca/knowledge-centre/quality-productivity-database/entry/4504/?gvid=2777">Creation of PRODIGE, a project management software</a>
                </td>
                <td id="gv-field-6-31" class="gv-field-6-31">Université de Montréal</td>
                <td id="gv-field-6-25" class="gv-field-6-25">3rd prize (Open Category)</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th id="gv-field-6-29" class="gv-field-6-29"><span class="gv-field-label"><a href="/knowledge-centre/quality-productivity-database/?sort=29&amp;dir=asc" class="gv-sort gv-icon-sort-asc"></a>&nbsp;Year Submitted</span>
                </th>
                <th id="gv-field-6-1" class="gv-field-6-1"><span class="gv-field-label"><a href="/knowledge-centre/quality-productivity-database/?sort=1&amp;dir=asc" class="gv-sort gv-icon-caret-up-down"></a>&nbsp;Descriptive Title of Proposal:</span>
                </th>
                <th id="gv-field-6-31" class="gv-field-6-31"><span class="gv-field-label"><a href="/knowledge-centre/quality-productivity-database/?sort=31&amp;dir=asc" class="gv-sort gv-icon-caret-up-down"></a>&nbsp;Name of Institution</span>
                </th>
                <th id="gv-field-6-25" class="gv-field-6-25"><span class="gv-field-label"><a href="/knowledge-centre/quality-productivity-database/?sort=25&amp;dir=asc" class="gv-sort gv-icon-caret-up-down"></a>&nbsp;Awarded</span>
                </th>
            </tr>
        </tfoot>
    </table>
</div>

这是上面代码的 fiddle https://jsfiddle.net/9xsyd8hf/embedded/result

问题陈述:

我想知道我需要在 fiddle 中添加哪些 CSS 代码这样当我在移动 View 中看到 fiddle 时，它应该是这样的:

在当前fiddle , 一切都以表格格式存在。我想知道我应该在 css 中进行哪些更改，以便在移动 View 中所有内容都应该单独显示。

Answer 1

在较小的宽度上，您可以将表格单元格显示为 div。然后他们就会按照你希望的那样行事。然后您可以通过 CSS 添加额外的文本，或添加 span 元素并仅在移动 View 上显示它们。

我写的 CSS:

@media (max-width: 760px) {

th {
  display: none;
}

td {
  display: block;
}

td:first-child::before {
  content: 'Year Submitted';
  display: block;
  font-weight: bold;
}

}

并链接到 fiddle :https://jsfiddle.net/t9ms4c65/