Замена таблиц на flexbox

27.12.2018

Давно на смену табличной верстке пришли другие технологии, но иногда ее еще используют т.к. "под рукой нет простого и понятного примера замены".

Поэтому ниже простая демонстрация замены таблицы на flexbox.

Для начала пример обыкновенной таблицы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

pic1

Пример таблицы с привычной для DIV'ов группировкой элементов

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
.soflex1
{
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}
</style>
 
<div class="soflex1">
    <div>
        <div>Left 1</div>
        <div>Left 2</div>
        <div>Left 3</div>
    </div>
    <div>
        <div>Center 1</div>
        <div>Center 2</div>
        <div>Center 3</div>
    </div>
    <div>
        <div>Right 1</div>
        <div>Right 2</div>
        <div>Right 3</div>
    </div>
</div>

Пример таблицы с привычной для TABLE'ов группировкой элементов

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
.soflex2 > div
{
    display: flex;
    justify-content: space-between;
}
</style>
 
<div class="soflex2">
    <div>
        <div>Left 1</div>
        <div>Center 1</div>
        <div>Right 1</div>
    </div>
    <div>
        <div>Left 2</div>
        <div>Center 2</div>
        <div>Right 2</div>
    </div>
    <div>
        <div>Left 3</div>
        <div>Center 3</div>
        <div>Right 3</div>
    </div>
</div>

Весь код разом (без justify-content: space-between;):

01.html (Download)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE HTML>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title></title>
 
<style type="text/css">
table td,
.soflex1 div div,
.soflex2 div div
{
    border: 1px solid #a9a6a3;
    padding: 3px;
}
 
 
.soflex1
{
    flex-direction: row;
    display: flex;
}
 
.soflex2 > div
{
    display: flex;
 
}
</style>
 
</head>
<body>
<div id="soTest">
    <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>
 
    <hr />
     
    <div class="soflex1">
        <div>
            <div>Left 1</div>
            <div>Left 2</div>
            <div>Left 3</div>
        </div>
        <div>
            <div>Center 1</div>
            <div>Center 2</div>
            <div>Center 3</div>
        </div>
        <div>
            <div>Right 1</div>
            <div>Right 2</div>
            <div>Right 3</div>
        </div>
    </div>
 
    <hr />
     
    <div class="soflex2">
        <div>
            <div>Left 1</div>
            <div>Center 1</div>
            <div>Right 1</div>
        </div>
        <div>
            <div>Left 2</div>
            <div>Center 2</div>
            <div>Right 2</div>
        </div>
        <div>
            <div>Left 3</div>
            <div>Center 3</div>
            <div>Right 3</div>
        </div>
    </div>
     
</div>
 
 
</body>
</html>

Бонус

Иногда нужно повлиять на отображение "колонок" в зависимости от ширины экрана:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.soflex111
{
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}
 
@media only screen and (max-width: 800px)
{
    .soflex111
    {
        flex-direction: column;
    }
}


Категории: HTML, CSS
Пометки: flexbox table
Яндекс.Метрика