Tell me how you can apply after to table-row in this code:

HTML:

<div class="table"> <div class="table-row line"> <div class="table-cell">Поле 1</div> <div class="table-cell">Поле 2</div> <div class="table-cell">Поле 3</div> <div class="table-cell">Поле 4</div> </div> <div class="table-row line"> <div class="table-cell">Поле 1</div> <div class="table-cell">Поле 2</div> <div class="table-cell">Поле 3</div> <div class="table-cell">Поле 4</div> </div> <div class="table-row line"> <div class="table-cell">Поле 1</div> <div class="table-cell">Поле 2</div> <div class="table-cell">Поле 3</div> <div class="table-cell">Поле 4</div> </div> </div>

CSS:

 .table { display: table; width: 100%; } .table-row { display: table-row; } .table-cell { display: table-cell; padding: 10px 0 } .line:after { content: ""; display: block; height: 1px; background: #000; }
  • Maybe so? jsfiddle.net/m0Lm740t jsfiddle.net/k8eb8dsn - soledar10
  • with the border, this is understandable, but it is necessary with the help of: after Now, for example, I made an additional div between .table and .table-row. But I don’t know whether it is possible to do this or there are some standards for some browsers that do not allow placing anything between them. <div class = "table"> <div class = "line"> <div class = "table-row"> <div class = "table-cell"> </ div> </ div> </ div> </ div> Is it possible to perform layout in this style? - webphp

0