CSS教程：如何精准样式化HTML表格的最后一行

<table id="data-table">
  <thead>
    <tr>
      <th>N</th>
      <th>N²</th>
      <th>N!</th>
      <th>Suma</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
      <td>4</td>
      <td>2</td>
      <td>8</td>
    </tr>
    <tr>
      <td>3</td>
      <td>9</td>
      <td>6</td>
      <td>18</td>
    </tr>
    <!-- 更多数据行 -->
    <tr>
      <td>6</td>
      <td>14</td>
      <td>9</td>
      <td>29</td>
    </tr>
    <!-- 汇总行，作为 <tbody> 的最后一个子元素 -->
    <tr>
      <td>总和 N</td>
      <td>总和 N²</td>
      <td>总和 N!</td>
      <td>总和</td>
    </tr>
  </tbody>
</table>

/* 基础表格样式，可选 */
table {
  width: 100%;
  border-collapse: collapse; /* 合并单元格边框 */
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* 关键：样式化表格的最后一行 */
/* 这里的选择器假定汇总行是其父元素（<tbody>）的最后一个 <tr> */
table tbody tr:last-child {
  background-color: darkblue; /* 将背景色设为深蓝色 */
  color: white; /* 文本颜色设为白色以便阅读 */
  font-weight: bold; /* 字体加粗 */
  text-align: center; /* 居中显示汇总文本 */
}

function generateDynamicTable() {
    let nr = 4; // 示例数据，假设用户输入4
    let tableHtml = "<table id='dynamic-table' class='tabClass'><thead><tr><th>N</th><th>N²</th><th>N!</th><th>Suma</th></tr></thead><tbody>";
    let sumN = 0, sumN2 = 0, sumNFact = 0;
    let factorial = 1;

    for (let i = 1; i <= nr; i++) {
        let val1 = i;
        let val2 = i * i;
        factorial *= i; // 计算阶乘
        let val3 = factorial;
        let rowSum = val1 + val2 + val3;

        tableHtml += "<tr><td>" + val1 + "</td><td>" + val2 + "</td><td>" + val3 + "</td><td>" + rowSum + "</td></tr>";

        sumN += val1;
        sumN2 += val2;
        sumNFact += val3;
    }

    // 添加汇总行到 <tbody> 的最后
    tableHtml += "<tr><td>" + sumN + "</td><td>" + sumN2 + "</td><td>" + sumNFact + "</td><td>∑</td></tr>";
    tableHtml += "</tbody></table>";

    // 假设页面中有一个 id 为 "rezultat" 的 div 来显示表格
    document.getElementById("rezultat").innerHTML = tableHtml;
}

// 页面加载后或用户操作后调用此函数
// 例如：window.onload = generateDynamicTable;
// 或者：<button onclick="generateDynamicTable()">生成表格</button>

#dynamic-table tbody tr:last-child {
  background-color: darkblue;
  color: white;
  font-weight: bold;
  text-align: center;
  /* 其他样式 */
}