Bottom line divider full width on table row-CodePudding

I have a table css's with this form: column 1, 2 and 3 are inline-block and column 4 and 5 are block. I want a bottom line divider between table rows that occupied 100% of the screen, not of the div.

Now the bottom line divider is width 100% but I want to cover the full screen. The right and left sides don't go all the way, that's what I want, they do go.

I'm using this:

.dataTable tbody tr:after {
    content: "";
    position: absolute !important;
    height: 1px !important;
    width: 100% !important;
    background-color: #dddddd !important;
}

Thanks.

Example:

.dataTable {
border: none !important;
}
  
.dataTable td:nth-child(1) {
display: inline-block !important;
}

.dataTable td:nth-child(2) {
display: inline-block !important;
}
  
.dataTable td:nth-child(3) {
display: inline-block !important;
}
  
.dataTable td:nth-child(4) {
display: block !important;
}
  
.dataTable td:nth-child(5) {
display: block !important;
margin-left: -25px !important;
}
  
.dataTable thead tr {
 position: absolute;
 left: -9999px;
}

.dataTable th,
.dataTable td {
  padding: 10px;
  border-bottom: none !important;
}
  
.dataTable tbody tr:after {
    content: "";
    position: absolute !important;
    height: 1px !important;
    width: 100% !important;
    background-color: #dddddd !important;
}

<table id="ptp_f8a8c39ec1dfbfd6_1"  data-config="{&quot;pageLength&quot;:-1,&quot;pagingType&quot;:&quot;numbers&quot;,&quot;serverSide&quot;:false,&quot;autoWidth&quot;:true,&quot;clickFilter&quot;:true,&quot;scrollOffset&quot;:15,&quot;resetButton&quot;:false,&quot;lengthMenu&quot;:[[10,25,50,100,-1],[10,25,50,100,&quot;All&quot;]],&quot;columnDefs&quot;:[{&quot;className&quot;:&quot;col-data_prova&quot;,&quot;targets&quot;:0},{&quot;className&quot;:&quot;col-illa_compet&quot;,&quot;targets&quot;:1},{&quot;className&quot;:&quot;col-modalitat_compet&quot;,&quot;targets&quot;:2},{&quot;className&quot;:&quot;col-title&quot;,&quot;targets&quot;:3},{&quot;className&quot;:&quot;col-actaresultats_prova&quot;,&quot;targets&quot;:4}],&quot;dom&quot;:&quot;<\&quot;posts-table-wrapper generatepress\&quot;<\&quot;posts-table-above posts-table-controls\&quot;>t>&quot;}" data-filters="false" data-order="[]" style="visibility: visible; position: static; width: 100%;" width="100%"><thead><tr><th  data-name="data_prova" data-orderable="false" data-searchable="true" rowspan="1" colspan="1" style="width: 29px;" aria-label="Data">Data</th><th data-name="illa_compet" data-orderable="false" data-searchable="true" data-click-filter="true"  rowspan="1" colspan="1" style="width: 20px;" aria-label="Illa">Illa</th><th data-name="modalitat_compet" data-orderable="false" data-searchable="true" data-click-filter="true"  rowspan="1" colspan="1" style="width: 60px;" aria-label="Modalitat">Modalitat</th><th data-name="title" data-orderable="false" data-searchable="true" data-priority="1"  rowspan="1" colspan="1" style="width: 78px;" aria-label="Competició">Competició</th><th data-name="actaresultats_prova" data-orderable="false" data-searchable="true"  rowspan="1" colspan="1" style="width: 60px;" aria-label="Resultats">Resultats</th></tr></thead><tbody><tr id="post-row-6228" ><td data-sort="1616198400"  tabindex="0">20/03/2021</td><td >Mallorca</td><td >Trail</td><td ><a href="https://www.faib.es/competicions/6228/">I Trail-Running Son Quint Palma – Night</a></td><td ></td></tr><tr id="post-row-6229" ><td data-sort="1616284800"  tabindex="0">21/03/2021</td><td >Mallorca</td><td >Trail</td><td ><a href="https://www.faib.es/competicions/6229/">I Trail-Running Son Quint Palma – Day</a></td><td ></td></tr><tr id="post-row-6340" ><td data-sort="1616889600"  tabindex="0">28/03/2021</td><td >Mallorca</td><td >Ruta</td><td ><a href="https://www.faib.es/competicions/6340/">San Silvestre Palma 2020</a></td><td ></td></tr></tbody></table>

Important: the table is automatically generated, I can't edit it to add classes. The CSS must be done with the HTML of the attached table.

CodePudding user response：

first of all, padding is giving that space.
the only thing needed is that set left:0 and right:0 for pseudo-element ::before ::after.
for your .dataTable tbody tr:after set left:0 and right:0.
Or I am unsure but your table has padding of 10px so set width:calc(100% 20px).
below is just a replication of that.

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f5f5f5;
}

.table {
  position: relative;
  background: #fff;
  padding: 15px;
  width: calc(100% - 60px);
}

.table .block {
  display: block;
}


/*for thoes border*/

.table::before,
.table::after {
  content: "";
  display: inline-block;
  height: 2px;
  width: 100%;
  background-color: #c5c5c5;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
}

.table::after {
  top: initial;
  bottom: 10px;
}

<div >
  <div >
    <span>a</span>
    <span>b</span>
    <span>c</span>
    <span >d</span>
    <span >e</span>
  </div>
</div>