jeudi 23 novembre 2017

Last Table row Border issue: With Table row padding with border 100% width

I need Table with both row padding with bottom-border with 100% width of the row.

I was able to achieve both but the last row of the table seems to be off.

If I don't apply following properties to table body I will not be able to achive padding. Any suggestions on how to deal with this issue:

border-left: 6.5rem solid transparent;
border-right: 6.5rem solid transparent;

table {
    font-size: 2rem;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 5rem;
    padding-bottom: 1rem;
}

tr {
  border-bottom: 1px solid #c7c8ca;
    line-height: 2.5rem;
    width: 100%;
    margin: 2.5rem;
}

tbody {
  border-left: 6.5rem solid transparent;
  border-right: 6.5rem solid transparent;
}
<table>
  <tbody>
    <tr>
  <td >
    <div>
       value
    </div>
  </td>
  <td >
    <div>
       value
    </div>
  </td>
  <td >
    <div>
      value
    </div>
  </td>
</tr>
   <tr>
  <td >
    <div >
       value
    </div>
    
  </td>
   <td >
    <div >
      Some value
    </div>
          </td>
   <td >
    <div >
       value
    </div>
    
  </td>
</tr>
<tr>
  <td >
    <div >
       value
    </div>
  </td>
   <td >
    <div >
      value</div>
    
  </td>
   <td >
    <div >
       value
    </div>
    
  </td>
</tr></tbody>
</table>

JSFiddle Link




Aucun commentaire:

Enregistrer un commentaire