CSS表格最后一行样式技巧
2025-09-17 21:07:50
0浏览
收藏
本篇文章给大家分享《CSS技巧：给表格最后一行添加样式方法》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。
理解CSS伪类：tr:last-child
在网页开发中，表格是展示结构化数据的重要元素。当我们需要突出显示表格的特定行，例如总计行或最后一行时，CSS伪类提供了一种简洁高效的解决方案。其中，tr:last-child和tr:last-of-type是两种常用的选择器。
- tr:last-child：这个伪类选择器会选中其父元素的最后一个子元素，并且该子元素必须是
类型。这意味着如果表格的最后一个子元素不是 （例如，是一个 ），则此选择器将不会匹配。- tr:last-of-type：这个伪类选择器会选中其父元素中所有
类型元素中的最后一个。与last-child不同，即使父元素的最后一个子元素不是 ，只要在此之前存在 元素，它也会成功选中最后一个 。 元素的最后一个在大多数标准的HTML表格结构中，如果总计行是表格或其
子元素，那么tr:last-child和tr:last-of-type通常会产生相同的效果。了解它们之间的细微差别有助于在更复杂的场景中做出正确的选择。 实践：为表格最后一行添加样式
以下将通过一个具体的例子，展示如何使用CSS为动态生成的表格的最后一行添加样式。
HTML结构示例
假设我们有一个通过JavaScript动态生成内容的表格，其基本结构如下。这里，我们假定表格包含一个表头和多个数据行，最后一行是总计行。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格最后一行样式</title> <style> /* 在这里添加CSS样式 */ </style> </head> <body> <h1>动态表格示例</h1> <input type="number" id="broj" value="3" min="2"> <button onclick="tablica()">生成表格</button> <div id="rezultat"> <!-- JavaScript生成的表格将显示在这里 --> </div> <script> function tablica() { var sum1 = 0, sum2 = 0, sum3 = 0; var nr = document.getElementById("broj").value; if (nr < 2) { document.getElementById("rezultat").innerHTML = "Prilagođeno samo za rad s brojevima većim od 1"; window.alert("Unijeli ste broj " + nr + ", 而该数字小于2..."); } else { var rez = "<table id='dynamicTable' class='tabClass'><thead><tr><th>N</th><th>N²</th><th>N!</th><th>Suma</th></tr></thead><tbody>"; var faktorijela = 1; for (var i = 1; i <= nr; i++) { let val1 = i; let val2 = i * i; let val3 = (faktorijela = faktorijela * i); rez = rez + "<tr><td>" + val1 + "</td><td>" + val2 + "</td><td>" + val3 + "</td><td>" + (val1 + val2 + val3) + "</td></tr>"; sum1 = sum1 + val1; sum2 = sum2 + val2; sum3 = sum3 + val3; } // 添加总计行 rez = rez + "<tr><td>" + sum1 + "</td><td>" + sum2 + "</td><td>" + sum3 + "</td><td>∑</td></tr>"; rez = rez + "</tbody></table>"; } var rezTablica = document.getElementById("rezultat"); rezTablica.innerHTML = rez; } // 页面加载时自动生成一次表格 document.addEventListener('DOMContentLoaded', tablica); </script> </body> </html>CSS样式代码
现在，我们将使用CSS来选中并美化表格的最后一行。
/* 基础表格样式 */ table { border-collapse: collapse; /* 合并边框 */ width: 80%; /* 表格宽度 */ margin: 20px auto; /* 居中显示 */ font-family: Arial, sans-serif; box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 添加阴影效果 */ } table th, table td { border: 1px solid #ddd; /* 单元格边框 */ padding: 12px; /* 内边距 */ text-align: center; /* 文本居中 */ } table th { background-color: #f2f2f2; /* 表头背景色 */ color: #333; font-weight: bold; text-transform: uppercase; /* 文本大写 */ } /* 关键样式：选中表格 tbody 中的最后一行的样式 */ /* 注意：如果表格没有显式使用 <thead> 和 <tbody>， 浏览器会自动创建 <tbody>。此处假定总计行是 <tbody> 的最后一个子元素。 */ #dynamicTable tbody tr:last-child { background-color: darkblue; /* 深蓝色背景 */ color: white; /* 白色字体 */ font-weight: bold; /* 加粗 */ border-top: 2px solid #333; /* 顶部加粗边框以突出 */ font-size: 1.1em; /* 字体略大 */ } /* 也可以针对最后一行的单元格进行更精细的控制 */ #dynamicTable tbody tr:last-child td { padding: 15px; /* 增加内边距 */ vertical-align: middle; /* 垂直居中 */ } /* 鼠标悬停效果 */ table tbody tr:not(:last-child):hover { background-color: #f5f5f5; }将上述CSS代码添加到HTML文件的
- tr:last-of-type：这个伪类选择器会选中其父元素中所有
