Адаптивные таблицы: показать содержание элементов thead в соответствующих тдс

Question

У меня есть таблицы, похожие на эту упрощенную версию:

<table>
    <thead>
        <tr><th></th>
            <th>1st sg.</th><th>2nd</th><th>3rd...</th>
        </tr>
    </thead>
    <tbody>
        <tr><th>Present</th>
            <td>sum</td><td>es</td><td>est...</td>
        </tr>
        <tr><th>Perfect</th>
            <td>fui</td><td>fuisti</td><td>fuit...</td>
        </tr>
    </tbody>
</table>

И они становятся довольно широкими. Так что я display: block все элементы таблицы, кроме thead, который display:none Стиль семантического интерфейса.

Который работает довольно хорошо, как есть. Но я все равно бы содержание от ths из thead быть все еще заметным.

Я думаю об использовании jQuery и динамическом добавлении атрибута col или же data-col, как видно, началось в этом JsFiddle.

Динамически созданный код будет аналогичен следующему:

<tbody>
    <tr>
        <th>Present</th>
        <td data-col="1st sg.">sum</td>
        <td data-col="2nd">es</td>
        <td data-col="3rd">est</td>
    </tr>
</tbody>

Итак, мой технический вопрос заключается в следующем:

Как я могу динамически получать содержимое из элементов thead и распределять указанное содержимое по всем tds того же столбца в качестве атрибута?

Другие решения приветствуются!

Answer 1

Вот функция JavaScript. Посмотрите, поможет ли это

    function td_col()
    {
        var table = $('table');
        table.find('tbody tr').each(function(){
            $(this).find('td').each(function(i){ 
               $(this).attr('data-col', table.find('thead tr th:eq('+(i + 1)+')').html());
            })
        })
    }

Обновление CSS:

        @media(max-width:470px) {
        td:before {
            float:right;
            content:attr(data-col); //Removed the brackets.
        }
    }

скрипка