Как отобразить содержимое на отдельных строках в CSS на мобильном телефоне / планшете?

Question

Я работаю над Wordpress (построен на пользовательской теме) веб-сайт , в котором я хочу отображать контент в отдельных строках в мобильном представлении.

Фрагменты кода 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

Постановка задачи:

Мне интересно, что CSSкоды, которые мне нужно добавить в скрипку , чтобы при просмотре скрипки в мобильном представлении она выглядела следующим образом:

В текущей скрипке все присутствует в табличном формате.Мне интересно, какие изменения я должен сделать в 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/