Hello, dear experts, help with the problem, it is very necessary. There is a table of div in it, one column and several lines, here is a simplified view:

 .vcom_tab {display:table; border-collapse: collapse;} .vcom_tab > div {display: table-row; border: dashed 1px #ddd; padding:5px;} 
 <div class="vcom_tab"> <div>Комментарии</div> <div> <div>Арсен</div> <div>Спасибо</div> </div> <div> <div>Михаил</div> <div>Незачто</div> </div> </div>

jsfiddle

How to apply padding property to table-row ?

I know from the manual that this property does not apply to tr , how to get out of the situation?

  • one
    It is necessary exactly table-row ? May still need a table-cell . Or, alternatively, the contents of the divs to which the table-row is applied, wrap them back into blocks and assign spaces to them - HamSter
  • Thanks for the help, the table-row not necessary, just if you change it to table-cell , then all the rows are converted into columns and the whole table rushes to the right like this: jsfiddle.net/dgfk2L3z/36 and I need to go down if I don’t find a simple solution I will use your second sentence. - Igor Salamov

1 answer 1

Like this

 .vcom_tab { display: table; border-collapse: collapse; } .vcom_tab > div { display: table-row; border: dashed 1px #ddd; padding: 5px; } .vcom_tab > div span { display: inline-block; padding: 10px 0; } 
 <div class="vcom_tab"> <div>Комментарии</div> <div> <div><span>Арсен</span></div> <div><span>Спасибо</span></div> </div> <div> <div><span>Михаил</span></div> <div><span>Незачто</span></div> </div> </div>