logo标签列表

如何在HTML表格中仅对最后一行设置border-bottom-style？

javascripthtmlgoogle-apps-scriptgoogle-sheets
4
我有这段HTML代码，它将显示一张表格，其中包含从google sheet获取的经过筛选数据的行。筛选是基于“qty”列中的值，其中的筛选条件仅显示当qty值不为零时的datarange行。因此，显示的行数可能会随着输入在google sheet中的qty值而变化。这也意味着，显示表格的最后一行也会不同。
在下面的HTML代码中，我有一个循环在javascript中，当它检测到行号是偶数时，它将应用特定的背景颜色。但我不知道如何设置相似的脚本，以识别lastrow并仅为该lastrow设置border-bottom-style。
之前，我尝试在< tr >样式的同一代码行中设置border-bottom-style，但这使每一行都在底部有了一个边框。我还尝试在循环之后和< /tbody >之前的另一行< tr >中设置它，但这看起来很丑，因为它显示了表格左边框与表格右边框线之间的间隙以及< 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>
亲爱的 Dell，当您提出问题时，请停止添加前言和后言。此外，请将较长的文本块拆分，以便其他贡献者可以轻松解析您的问题。谢谢！ - Oleg Valter is with Ukraine
2个回答
3
尝试使用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;
    }

使用如下方式更好，适用于所有样式。您无需为每个样式输入样式名称。

更多信息：https://www.w3schools.com/cssref/sel_nth-child.asp

示例 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>

我很想尽可能地简化它，你的代码确实可以让我的代码看起来非常整洁，@FEP Arda。但是由于我对这种编码语法完全不熟悉，你介意告诉我应该把代码放在哪里吗？因为当我把它们放在<body>中时似乎无法正常工作。谢谢。 - dell
你好。很抱歉回复晚了。页面代码应该像这样 rn，我已经编辑了帖子。请再看一遍。 - Arda Yasar
尝试了一下，非常好用！非常感谢@Arda Yasar。 - dell
2

我相信您的目标如下。

  • 您想将边框放置在最后一行表格的底部。

我认为，在这种情况下，我建议将样式设置为 <tbody>，如下所示。

来自：

<tbody>

To:

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

结果：

当使用样本值时，您的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>

参考资料：

1
非常感谢@Tanaike！它像魔法一样工作！我没有意识到解决方案只是tbody中的一个样式！这样一个简单的解决方案，但在发布这个问题之前，我已经耗尽了我的大脑能量和时间。真的非常感激！ - dell
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接