Отзывчивый, горизонтальный стол дизайн

Question

Я хочу, чтобы показать свою таблицу, как в следующем, при определенном размере экрана (с @media):

По умолчанию табличного:

(1 | 1) (1 | 2) (1 | 3)

(2 | 1) (2 | 2) (2 | 3)

(3 | 1) (3 | 2) (3 | 3)

Моя идея для маленьких экранов:

(1 | 1)

(1 | 2)

(1 | 3)

(2 | 1)

(2 | 2)

(2 | 3)

(3 | 1)

(3 | 2)

(3 | 3)

Вы не знаете, как это можно сделать? Я хочу, чтобы строки были выровнены по горизонтали.

Answer 1

Это невозможно сделать традиционными table s, но вы можете использовать <div s.

.col { 
 
    border: 1px solid #000000; 
 
    display: inline-block; 
 
    width: 80px; 
 
} 
 
@media (max-width: 400px) { 
 
    .col { 
 
    width: 100%; 
 
    } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col">1.1</div><div class="col">1.2</div><div class="col">1.3</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col">2.1</div><div class="col">2.2</div><div class="col">2.3</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col">3.1</div><div class="col">3.2</div><div class="col">3.3</div> 
 
    </div> 
 
</div>

Существует также другой вариант с использованием таблиц CSS3, но имеет меньшую совместимость браузера.

.table { 
 
    display: table; 
 
} 
 
.tr { 
 
    display: table-row; 
 
} 
 
.td { 
 
    border: 1px solid #000000; 
 
    display: table-cell; 
 
    width: 80px; 
 
} 
 
@media (max-width: 400px) { 
 
    .table, 
 
    .tr, 
 
    .td { 
 
    display: block; 
 
    } 
 
    .td { 
 
    width: 100%; 
 
    } 
 
}

<div class="table"> 
 
    <div class="tr"> 
 
    <div class="td">1.1</div> 
 
    <div class="td">1.2</div> 
 
    <div class="td">1.3</div> 
 
    </div> 
 
    <div class="tr"> 
 
    <div class="td">2.1</div> 
 
    <div class="td">2.2</div> 
 
    <div class="td">2.3</div> 
 
    </div> 
 
    <div class="tr"> 
 
    <div class="td">3.1</div> 
 
    <div class="td">3.2</div> 
 
    <div class="td">3.3</div> 
 
    </div> 
 
</div>