Переделка табличной верстки на flexbox

26.12.2018 17:16:19

Иногда нужно переделать старую табличную верстку, на отзывчивую (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
Яндекс.Метрика