Friends, now I'm making up the layout. Not a lot of experience. I wanted to know how it would be better to impose a specific block. Using a table or divs, but using display enter image description here

  • one
    Add your question your version of the layout and explain why the requirement is connected с применением display . - Gleb Kemarsky
  • 9
    Looks like a table, why not use a table? - Vladimir Gamalyan
  • I agree with the previous speaker - all that is a table - you need to impose a table) - Nikolay

1 answer 1

I may not have done it right, but it seems like

 .table{ display:table; margin:auto; } .table-cell{ display:table-cell; max-width:150px; min-width:150px; text-align:center; border:1px solid #ccc; font-size:12px; position:relative; } .ch{ position:absolute; left:0; } 
 <h2>Название</h2> <div class="table"> <div class="table-cell"> Рейс </div> <div class="table-cell"> Вылет </div> <div class="table-cell"> Прилёт </div> <div class="table-cell"> В пути </div> <div class="table-cell"> Самолёт </div> <div class="table-cell"> Класс </div> </div> <div class="table"> <!--2--> <div class="table-cell"> <input type="checkbox" class="ch"> SN-120 </div> <div class="table-cell"> 08:50 Чита </div> <div class="table-cell"> 11:50 Домодедово </div> <div class="table-cell"> 9:00 </div> <div class="table-cell"> Боинг 737-800 </div> <div class="table-cell"> Э / 4 </div> </div> <div class="table"> <!--2--> <div class="table-cell"> <input type="checkbox" class="ch"> SN-120 </div> <div class="table-cell"> 08:50 Чита </div> <div class="table-cell"> 11:50 Домодедово </div> <div class="table-cell"> 9:00 </div> <div class="table-cell"> Боинг 737-800 </div> <div class="table-cell"> Э / 4 </div> </div>

the link to the sandbox seems to me better

  • one
    Why table spread divs? - Nikolay
  • @ Nikolai, to adapt later for mobile. For example, build everything under each other. This is a very good way! - HamSter
  • @Elena, I do not agree with you: it is in principle an awkward solution if there are a lot of columns or cells. In this case, it is better to make a horizontal table scroll) - Nikolay
  • @ Nikolay, on any principle, at least the css table can be adapted for mobile phone at least by blocks, I didn’t have a task for this - user33274
  • @Nikolay, it may be better, but if the customer said that there should be no scrolling, then the table-cell is an excellent solution. And no difficulties, as for me. - HamSter