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

HTML & CSS
1

First pic below shows table layout prior to my CSS tweak. I’ve added red borders to TD cells just so you can see the structure of the table. This is the desired layout, expect I need gray divider lines below each row.

1054×732 54.3 KB

2nd pic shows what happens to the table after this line of CSS is introduced (to achieve table row divider lines that do not span full width of parent table)

.oolTable.data table tr:after{content:'';height:1px;width:995px;position:absolute;background:#ddd;left:10px}

1095×702 37.9 KB

How can I prevent the table from shrinking like this?

2

Note: The only fix I’ve found is below:

.admReports .oolTable.data .table-beneficiary td{width:auto}
.admReports .oolTable.data .table-beneficiary td:last-child{padding-right:20px;width:auto!important}

After the first line, the layout appears to be fixed, except the table is appx 3px less wide than the container. Adding the 2nd line “width:auto!important” fixes that.

3

Try giving it display:block to put it on a new line.

4

I might be missing the obvious but why can’t you apply a gray border-bottom to the bottom of the table-cell instead of using :after?

I’m not getting the same results as you on a similar test so we will probably need to see the html and css that makes up the demo. When you insert an :after element into a table-row then it effectively becomes another cell thrown into the mix (depending on browser) so results may be unreliable.

3 Likes
5

Thanks Paul, the original solution was exactly that:

.oolTable tr td{border-bottom:1px solid #ddd}

The problem with that approach is that the client came back and decided they did not want the borders to span the full width of the table. This is an existing legacy application that is getting a facelift via CSS, so the markup cannot be changed.

The blue header element is part of the same table and must extend full width left to right. However, the divider lines between rows cannot extend full width, hence I had to remove the very reliable and bulletproof border-bottom on the TD cells in favor of using the psuedo insert after each TR

6

Does this help?

<!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>
<!--
https://www.sitepoint.com/community/t/adding-after-content-to-tr-breaks-table-display-before-and-after-pics/222455
Scott_Blanchard
Apr 27,2016 11:53 AM
-->
    <style type="text/css">
/*
table {
    width:100%;
    border-collapse:collapse;
}
td {
    position:relative;
    border:1px solid red;
}
td:after {
    content:"";
    position:absolute;
    left:10px;
    bottom:0;
    right:10px;
    border-bottom:1px solid lightgray;
}


    </style>
</head>
<body>

<table class="table=beneficiary" border="0" cellspacing="0" cellpadding="3">  <!-- width:100% assigned in CSS! -->
    <tbody>
        <tr>
            <td class="light" colspan="3" style="padding-left:10px;">  <!-- NO width assigned -->
                <h2>Report Class</h2>
            </td>
        </tr>
        <tr>
            <td style="padding-left:10px;">Administrative</td>    <!-- NO width assigned -->
            <td width="200" valign="middle" style="text-align:right;">  <!-- fixed width; preferably assigned in CSS -->
                <input class="button modify" type="button" value="modify" onclick="doshit">
                <input class="button delete" type="button" value="delete" onclick="javascript:doDelete('5')">
            </td>
        </tr>
        <tr>
            <td style="padding-left:10px;">Audit Reports</td>
            <td valign="middle" style="text-align:right;">    <!-- NO width assignment necessary -->
                <input class="button modify" type="button" value="modify" onclick="doshit">
                <input class="button delete" type="button" value="delete" onclick="javascript:doDelete('5')">
            </td>
        </tr>
        <tr>
            <td style="padding-left:10px;">Communications</td>
            <td valign="middle" style="text-align:right;">   <!-- NO width assignment necessary -->
                <input class="button modify" type="button" value="modify" onclick="doshit">
                <input class="button delete" type="button" value="delete" onclick="javascript:doDelete('5')">
            </td>
        </tr>
    </tbody>
</table>

</body>
</html>
1 Like
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
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.