How to make responsive table?

How to make responsive table, as shown on the picture?
Thank you

5c98716ba5d65597358198.jpeg5c9871c0cbabb936511761.jpeg
td {
display:inline-block;
 min-width: 320px;
max-width: 414px;
}
March 19th 20 at 08:25
2 answers
March 19th 20 at 08:27
The table does not do adaptive. If you want to content under all conditions was displayed as the top picture, I usually deduce horizontal scrolling.
March 19th 20 at 08:29
To make content in 2 columns do not have to use a table.
All you need to do the flex unit.
<div class="flex_block">
 the <div>Column 1</div>
 the <div>Column 2</div>
</div>


.flex_block {
 width: 100%;
 display: flex;
}
.flex_block > div {
 flex: 1 1 auto;
}


Properties of blocks, such as width, "malleability", the order can be varied. In fact, there's a bunch of possibilities. If you are not familiar with flexbox here help: https://html5.by/blog/flexbox/

Find more questions by tags Adaptive design