Переделка HTML таблицы во flexbox

26.12.2018 17:16:19

Иногда нужно заменить старую табличную верстку (HTML таблицу), на отзывчивую (Responsive), правильный вариант, это переверстать (на эту тему есть заметка Замена таблиц на flexbox ), но иногда это слишком затратно по ресурсам.

Тут есть простое решение - превратить таблицу в flexbox

 
<style type="text/css">
table td
{
    border: 1px solid #a9a6a3;
    padding: 3px;
}

@media only screen and (max-width: 768px) {
    table td
    {
        flex-direction: row;
        display: flex;
    }
}
</style>

<table>
    <tr>
        <td>Left 1</td>
        <td>Center 1</td>
        <td>Right 1</td>            
    </tr>
    <tr>
        <td>Left 2</td>
        <td>Center 2</td>
        <td>Right 2</td>            
    </tr>
    <tr>
        <td>Left 3</td>
        <td>Center 3</td>
        <td>Right 3</td>            
    </tr>
</table>


Категории: HTML, CSS
Пометки: Переделка табличной верстки на flexbox
Яндекс.Метрика