Как свернуть таблицу строк, когда размер получит минимальную ширину при изменении размера

Question

Я пытаюсь создать простую адаптивную таблицу (только с одной строкой).

                <table style={{'width': '100%'}}>
                    <tr>
                        <th style={{'width': '25%', minWidth: 200, background: 'red'}}>25%</th>
                        <th style={{'width': '5%', minWidth: 40, background: 'blue'}}>5%</th>
                        <th style={{'width': '25%', minWidth: 200, background: 'red'}}>25%</th>
                        <th style={{'width': '17%', minWidth: 136, background: 'blue'}}>17%</th>
                        <th style={{'width': '17%', minWidth: 136, background: 'red'}}>17%</th>
                        <th style={{'width': '11%', minWidth: 88, background: 'blue'}}>11%</th>
                    </tr>
                </table>

Итак, моя цель - свернуть строку (ряд на строку), когда я изменю размер окна на меньшее.

Фактическое состояние:

25% | 5% | 25% | 17% | 17 % | 11%

ожидаемое состояние при изменении размера окна

25%
---
5%
---
25%
---
17%
---
17%
---
11%

Итак, если есть лучший способ (например, с использованием div), скажите мне, как.

Спасибо за любую помощь. (Примечание: У меня есть только одна строка - поэтому я думаю, что таблица не является оптимальной)

Спасибо за любую помощь.

(это синтаксис React)

Answer 1

Не уверен, правильно ли я понимаю, но вы можете просто использовать div и применить flex ad flex-direction к родителю вместе с базовыми медиазапросами:

<div class="wrapper">
    <div style={{'width': '25%', minWidth: 200, background: 'red'}}>25%</div>
    ...
</div>

Объявление примените что-то вроде:

.wrapper {
    display: flex;
    flex-direction: column;      /* display on top of each other */
}
@media (max-width: 768px) {
    .wrapper > * {
        width: 100% !important;  /* might be required in order to override inline styles */
    }
}
@media (min-width: 768px) {      /* on screens larger than 768px */
    .wrapper {
        flex-direction: row;     /* display next to each other */
    }
}

Answer 2

Лучше использовать внутренний или внешний CSS с настройкой id каждого th.

. Проверьте это: https://jsfiddle.net/dr42wqaz/

body {
  margin: 0;
  padding: 0;
}
#Mytable {
  width: 100%;
}
#Fth {
  width: 25%;
  min-Width: 200px;
  background: red;
}
#Sth {
  width: 5%;
  min-Width: 40px;
  background: blue;
}
#Tth {
  width: 25%;
  min-Width: 200px;
  background: red;
}
#FRth {
  width: 17%;
  min-Width: 136px;
  background: blue;
}
#FTth {
  width: 17%;
  min-Width: 136px;
  background: red;
}
#SXth {
  width: 11%;
  min-Width: 88px;
  background: blue;
}

<table id="Mytable">
  <tr>
    <th id="Fth">25%</th>
    <th id="Sth">5%</th>
    <th id="Tth">25%</th>
    <th id="FRth">17%</th>
    <th id="FTth">17%</th>
    <th id="SXth">11%</th>
  </tr>
</table>