Here is a table click

Adaptive is good to ± 600 - 700, but then hell.

How can you make it look good and be adaptive?

.table-prices { width: 100%; tbody { tr { display: table; width: 100%; border: 1px solid #ebebeb; border-top: none; background: #f8f8f8; padding: 15px 35px; border-bottom: 1px dashed #ebebeb; @include transition(.2s background); &:first-child { border-top: 1px dashed #ebebeb; } &:last-child { border-bottom: 1px solid #ebebeb; } &:nth-child(even) { background: $white; } &:hover { background: $green; td { color: $white; } } td { font: 16px $font_regular; color: $grey; @include transition(.2s color); &:first-of-type { width: 80%; } p { padding: 0; } } &:first-of-type { border: none; background: #f8f8f8; padding: 20px 0; td { font: 17px $font_bold; color: $grey; text-transform: uppercase; &:first-of-type { padding-left: 35px; } &:last-of-type { padding-right: 35px; } } } } } }
  • one
    What do you want to happen when < 600 px ? The table is shrinking to the maximum, and how necessary? “looking good” is very vague. - Vadim Ovchinnikov
  • If you can transfer your code here from a third-party resource. - Vadim Ovchinnikov
  • @VadimOvchinnikov fixed the question, there is a link to the codepen - look please - Nikita Shchypylov
  • Well, only the most important thing is not. What do you want to do with this table with a screen width of less than 600 pixels? Maybe let it add a scroll and so come down? - Vadim Ovchinnikov
  • one
    Well, what to do with the text and cells? It can remove some columns for the mobile version, can make text with dots in case of overflows, can reduce the font, generally make other markup for the mobile version, etc. There are a lot of options, but which one should you decide. - Vadim Ovchinnikov

2 answers 2

If the table has thead with headers, then you can make the table "adaptive", as this makes the bootstrap - wrap it in such a div:

 .table-responsive { min-height: .01%; overflow-x: auto; }

If the table does not have headers, then you can make it adaptive by translating into blocks:

 @media(max-width:600px){ table, tbody, tr, td{ display:bolck; } }

Internal padding and border can also be changed depending on the situation - depending on what your table is. For example, you can remove all borders from the cells, align the text in the center and add a border to the bottom for each row, then the rows will be divided visually into blocks.

     table { width: 100%; max-width: 600px; margin: auto; }
    • Look at the code on codecode, please - Nikita Shchypylov
    • Actually, I looked for a long time. - Qwertiy ♦ 2:49 PM
    • So I have the same thing ... - Nikita Shchypylov