Adding :after content to TR breaks table display (before and after pics)

HTML & CSS
7

To avoid the gaps between cells I would modify Rons code to this:

<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>restyled table</title>
    <style type="text/css">

.table-beneficiary h2{margin:0}
.table-beneficiary,.table-beneficiary td{
	 -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.table-beneficiary  {
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	border:1px solid red;
	position:relative;
}
.table-beneficiary td {
	padding:10px;
	width:auto!important;
}
.table-beneficiary td.light:only-child{background:blue;color:#fff;}
.table-beneficiary tr + tr td:first-child:after {
	content:"";
	position:absolute;
	display:block;
	left:10px;
	right:10px;
	margin:10px 0 0;
	border-bottom:1px solid lightgray;
}
.table-beneficiary tr:last-child td:after {visibility:hidden}

</style>
    </head>
    <body>
    <table class="table-beneficiary" width="100%" border="0" cellspacing="0" cellpadding="3">
      <tbody>
        <tr>
          <td class="light" colspan="3" style="padding-left:10px;width:100%"><h2>Report Class</h2></td>
        </tr>
        <tr>
          <td width=30% style="padding-left:10px;">Administrative</td>
          <td width="10%"  valign="middle" style="text-align:right;"><input class="button modify" type="button" value="modify" >
            <input class="button delete" type="button" value="delete"></td>
        </tr>
        <tr>
          <td width=30% style="padding-left:10px;">Administrative</td>
          <td width="10%"  valign="middle" style="text-align:right;"><input class="button modify" type="button" value="modify" >
            <input class="button delete" type="button" value="delete"></td>
        </tr>
        <tr>
          <td width=30% style="padding-left:10px;">Administrative</td>
          <td width="10%"  valign="middle" style="text-align:right;"><input class="button modify" type="button" value="modify" >
            <input class="button delete" type="button" value="delete"></td>
        </tr>
      </tbody>
    </table>
</body>
</html>
1 Like