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>
Aucun commentaire:
Enregistrer un commentaire