Question

我正在使用Wordpress（基于自定义主题）website，在其中我希望在移动视图中的不同行上显示内容。

我在检查上述网站的某些内容时看到的 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>

以下是上面代码https://jsfiddle.net/9xsyd8hf/embedded/result的小提琴

问题陈述：

我想知道我需要在fiddle中添加什么CSS代码，这样当我在移动视图中看到小提琴时，它应该看起来像这样：

在当前fiddle中，所有内容均以表格格式显示。我想知道我应该在CSS中进行哪些更改，以便在移动视图中所有内容都应放在单独的行中。

Answer 1

在较小的宽度上，您可以将表格单元格显示为div。然后他们将按照您希望的方式运行。然后，您可以通过CSS添加其他文本，或者添加span元素并仅在移动视图上显示它们。

我写的CSS：

@media (max-width: 760px) {

th {
  display: none;
}

td {
  display: block;
}

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

}

并链接到小提琴：https://jsfiddle.net/t9ms4c65/

如何在移动/平板电脑视图的CSS中的单独行上显示内容？

1 个答案: