如何仅在 HTML 表格的最后一行设置边框底部样式？

Question

I have this HTML code that will display a table consists of rows of filtered data fetched from a google sheet.我有这个 HTML 代码，它将显示一个表格，该表格由从谷歌工作表中提取的过滤数据行组成。 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.过滤器基于“qty”列中的值，其中条件只是在 qty 值不为零时显示数据范围的行。 Hence, the number of rows displayed could vary from time to time depending on the qty value input in that google sheet.因此，显示的行数可能会不时变化，具体取决于该 google 表格中输入的数量值。 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.在下面的 HTML 代码中，我在 javascript 中有一个循环，当它检测到行号是偶数时，它将应用特定的背景颜色。 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.早些时候，我尝试在<tr>样式的同一代码行中设置该 border-bottom-style ，但这使每一行的底部都有一个边框。 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.我还尝试在循环之后和</tbody>行之前将它设置在另一个<tr>行中，但它看起来很难看，因为它显示了表格左边框和表格右边框线之间的间隙以及<body>之间的间隙<body>和<tfoot>内容。

<!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>

Answer 1

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.我想在这种情况下，我想建议将样式设置为<tbody>如下。

From:从：

<tbody>

To:到：

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

Result:结果：

When a sample value is used, your HTML becomes as follows.使用示例值时，您的 HTML 将如下所示。

 <!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:参考：

<tbody>: The Table Body element <tbody>：表格主体元素

Answer 2

Try to CSS.尝试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更多： https : //www.w3schools.com/cssref/sel_nth-child.asp

Example HTML page:示例 HTML 页面：

 /*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>

如何仅在 HTML 表格的最后一行设置边框底部样式？

问题描述

2 个解决方案

解决方案1
3 已采纳 2020-10-01 02:23:47

From:从：

To:到：

Result:结果：

Reference:参考：

解决方案2
2 2020-10-01 02:32:46

如何仅在 HTML 表格的最后一行设置边框底部样式？

问题描述

2 个解决方案

解决方案1 3 已采纳 2020-10-01 02:23:47

From:从：

To:到：

Result:结果：

Reference:参考：

解决方案2 2 2020-10-01 02:32:46

解决方案1
3 已采纳 2020-10-01 02:23:47

解决方案2
2 2020-10-01 02:32:46