4

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>Somebody@Work
</body>
</html>
Oleg Valter is with Ukraine
  • 9,619
  • 8
  • 37
  • 59
dell
  • 171
  • 13
  • Dear dell, please stop adding forewords and afterwards when asking questions. Also please split the longer text blocks, so other contributors can easily parse your questions. Thank you! – Oleg Valter is with Ukraine Oct 01 '20 at 02:48

2 Answers2

3

Try to CSS. Like:

    tr:last-child{ /*this will select last tr*/
      border: 2px solid black;
      background-color: yellow;
      }
      
    tr:nt-child(3){ /*this will select 3rd tr*/
      border: 2px solid black;
      background-color: yellow;
      }
      
    tr:nt-child(n+2){ /*this will select after 2nd tr*/
      border: 2px solid black;
      background-color: yellow;
    }

It's better to use like this. Shortcut for every style. You won't need to type style to each one.

More: https://www.w3schools.com/cssref/sel_nth-child.asp

Example HTML page:

/*main.css*/

    tr:last-child{ /*this will select last tr*/
      border: 2px solid black;
      background-color: yellow;
      }
      
    tr:nt-child(3){ /*this will select 3rd tr*/
      border: 2px solid black;
      background-color: yellow;
      }
      
    tr:nt-child(n+2){ /*this will select after 2nd tr*/
      border: 2px solid black;
      background-color: yellow;
    }
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="main.css"> <!-- your css file should be here with i gave codes to you -->
</head>
<body>
<!-- all the tags should be here -->
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Arda Yasar
  • 66
  • 9
  • I would luv to simplify it as much as possible and your code really can make my code looks really neat, @FEP Arda. But since I'm totally very new to this kinda coding syntax, would you mind to let me know where I should park the code, pls? Because it seems like it doesn't work when I parked them in the ``.tq – dell Oct 01 '20 at 03:08
  • Hello again. Sorry for late answering. The page code should be like this rn which i edited the post. Look again – Arda Yasar Oct 01 '20 at 09:32
  • Tried it and it works just nice! Thanks a lot @Arda Yasar. – dell Oct 04 '20 at 17:36
2

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>Somebody@Work
</body>

</html>

Reference:

Tanaike
  • 181,128
  • 11
  • 97
  • 165
  • 1
    Thanks so much @Tanaike! It works like a charm! I didn't realize that the solution is just a style in tbody! Such a simple solution yet I drained out my brain energy and time for days before posting this question. Really appreciate it! – dell Oct 01 '20 at 03:04