How to set the border-bottom-style only on last row of table in HTML?

I have this HTML code that will display a table consists of rows of filtered data fetched from a google sheet. The filter is based on the value in column ‘qty’ where the criteria are just to show rows of datarange when the qty value is not zero. Hence, the number of rows displayed could vary from time to time depending on the qty value input in that google sheet. And that would also mean, the lastrow for the displayed table would also be different.

In the HTML code below, I have a loop in javascript that will apply a specific background color when it detects the row number is even number. But I don’t know how to set a similar script that will identify the lastrow and set the border-bottom-style for that lastrow only.

Earlier I have tried to set that border-bottom-style in the same code line of <tr> style but that has made every row to have a border at the bottom. I had also tried to set it in another <tr> line after the loop and before </tbody> line but it looks ugly because it shows a gap between the table left border and the table right border line and a gap between the <body> and <tfoot> content.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
 <br>Dear Mr. PIC,
 <br>
 <br>Stocktake for today for your kind perusal.
 <br>
 <br>
 <div style="background-color:#3E1176;height:3px;"></div>
 <br> 

<table style="height: 333px; width: 99.9296%;border-collapse: collapse; border-color: #3E1176; border-style: inset; margin-left: auto; margin-right: auto;" border="0">
<thead>
<tr style="height:50px;background-color:#3E1176;text-align:center;padding:10px;color:white;font-size:15px;font-style:bold;" bgcolor="#3E1176">
<th style="border-style:solid; border-width:thick;border-color: #3E1176 white #3E1176 #3E1176;padding:6px;vertical-align: middle;">Description</th>
<th style="border-top-style: solid;border-bottom-style: solid;border-width:thick;border-color: #3E1176;padding:6px;vertical-align: middle;">Qty</th>
<th style="border-style:solid; border-width:thick;border-color: #3E1176 white #3E1176 white;padding:6px;vertical-align: middle;">MinStock</th>
<th style="border-top-style:solid;border-right-style:solid; border-bottom-style:solid;border-width:thick;border-color: #3E1176 #3E1176 #3E1176;padding:6px;vertical-align: middle;">MaxStock</th>
</tr>
</thead>

<tbody>

<?tableRangeValues.forEach((r,i)=>{
let color;
if(i%2===0){color="white"}else{color="#F6EFFE"}?>
<tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:<?=color?>;">
<td style="vertical-align: middle;text-align:left;padding:6px;"><?=r[0]?></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"><?=r[3]?></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"><?=r[4]?></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"><?=r[6]?></td>
</tr>
<?})?>
</tbody>

<tfoot>
<tr style="color:#3E1176; font-size:22px;font-weight:bold;">
<td colspan="3" style="text-align:right;">Total</td>
<td style="padding:4px;text-align:right;"><?=totalqty?></td>
</tr>
</tfoot>
</table>

<br>
<br>Thank you.
<br>
<br>Yours Sincerely,
<br>[email protected]
</body>
</html>

Answer

I believe your goal as follows.

  • You want to put the border to the bottom of the last table row.

I think that in this case, I would like to propose to set the style to <tbody> as follows.

From:

<tbody>

To:

<tbody style="border-style: none solid solid;">

Result:

When a sample value is used, your HTML becomes as follows.

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <br>Dear Mr. PIC,
  <br>
  <br>Stocktake for today for your kind perusal.
  <br>
  <br>
  <div style="background-color:#3E1176;height:3px;"></div>
  <br>

  <table style="height: 333px; width: 99.9296%;border-collapse: collapse; border-color: #3E1176; border-style: inset; margin-left: auto; margin-right: auto;" border="0">
<thead>
  <tr style="height:50px;background-color:#3E1176;text-align:center;padding:10px;color:white;font-size:15px;font-style:bold;" bgcolor="#3E1176">
    <th style="border-style:solid; border-width:thick;border-color: #3E1176 white #3E1176 #3E1176;padding:6px;vertical-align: middle;">Description</th>
    <th style="border-top-style: solid;border-bottom-style: solid;border-width:thick;border-color: #3E1176;padding:6px;vertical-align: middle;">Qty</th>
    <th style="border-style:solid; border-width:thick;border-color: #3E1176 white #3E1176 white;padding:6px;vertical-align: middle;">MinStock</th>
    <th style="border-top-style:solid;border-right-style:solid; border-bottom-style:solid;border-width:thick;border-color: #3E1176 #3E1176 #3E1176;padding:6px;vertical-align: middle;">MaxStock</th>
  </tr>
</thead>

<tbody style="border-style: none solid solid;">

        <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:white;">
    <td style="vertical-align: middle;text-align:left;padding:6px;">a1</td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
  </tr>
        <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:#F6EFFE;">
    <td style="vertical-align: middle;text-align:left;padding:6px;">a2</td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
  </tr>
        <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:white;">
    <td style="vertical-align: middle;text-align:left;padding:6px;">a3</td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
  </tr>
        <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:#F6EFFE;">
    <td style="vertical-align: middle;text-align:left;padding:6px;">a4</td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
  </tr>
        <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:white;">
    <td style="vertical-align: middle;text-align:left;padding:6px;">a5</td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
    <td style="vertical-align: middle;text-align:right;padding:6px;"></td>
  </tr>
      </tbody>

<tfoot>
  <tr style="color:#3E1176; font-size:22px;font-weight:bold;">
    <td colspan="3" style="text-align:right;">Total</td>
    <td style="padding:4px;text-align:right;">sample</td>
  </tr>
</tfoot>
  </table>

  <br>
  <br>Thank you.
  <br>
  <br>Yours Sincerely,
  <br>[email protected]
</body>

</html>

Reference: