如何正确地定位使用tfoot、tbody和thead的表中的最后一个tr？
在HTML表格中，tfoot、tbody和thead是用于组织表格内容的元素。它们可以帮助我们更好地定位和操作表格中的最后一个tr。
- tfoot（表尾）：tfoot元素用于定义表格的页脚部分。通常情况下，tfoot位于表格的最后，用于显示汇总信息或其他与表格内容相关的附加信息。tfoot只能出现在table元素内，并且只能有一个tfoot元素。
- tbody（表体）：tbody元素用于定义表格的主体部分。它包含了表格中的实际数据行。tbody可以有多个，但通常情况下只有一个tbody元素。tbody元素可以帮助我们更好地组织和操作表格中的数据。
- thead（表头）：thead元素用于定义表格的头部部分。它包含了表格的标题行或列。thead只能出现在table元素内，并且只能有一个thead元素。thead元素可以帮助我们更好地标识表格的标题和表头信息。
要正确地定位使用tfoot、tbody和thead的表中的最后一个tr，可以按照以下步骤进行：
- 首先，确定表格是否包含tfoot元素。如果包含tfoot元素，则最后一个tr位于tfoot元素内。
- 如果表格没有tfoot元素，那么可以通过以下步骤定位最后一个tr：
- 首先，确定表格是否包含tbody元素。如果包含tbody元素，则最后一个tr位于tbody元素内。
- 如果表格没有tbody元素，那么可以通过以下步骤定位最后一个tr：
- 首先，确定表格是否包含thead元素。如果包含thead元素，则最后一个tr位于thead元素内。
- 如果表格没有thead元素，则最后一个tr就是表格中的最后一个tr。
在定位到最后一个tr后，可以根据具体需求进行相应的操作，例如修改样式、添加内容等。
腾讯云相关产品和产品介绍链接地址：
相关·内容
当表有空tbody时，Firefox不能正确地呈现表格单元格边框。
但是，如果使用伪选择器tbody:empty {display:none;}隐藏tbody元素，则所有内容都会按预期呈现。
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
.fixed tbody:empty {
display: none;
}
<table class="broken">
<thead>
<tr>
浏览 1提问于2015-10-16得票数 9
回答已采纳
我有一张桌子。
它当前包含thead、tbody和tfoot部分。
我想以表中的最后一行(tr)为目标。
如果我使用tr:last-of-type，它会导致3行成为目标：
这是因为它以头部中的最后一个tr、tbody中的最后一个tr和tfoot中的最后一个tr为目标。
我不希望它以3行为目标。我只希望它以表中的最后一行为目标。
我可以使用tfoot tr:last-of-type，只要tfoot中至少有一个tr元素，它就可以工作：
但是，如果tfoot是空的，或者如果表中缺少tfoot元素，那么什么都不会成为目标。
我希望始终以表格的绝对最后一行为目标，只使用CS
浏览 41提问于2016-09-16得票数 3
11回答
我有一个带有页眉和页脚的HTML表：
<table id="myTable">
<thead>
<tr>
<th>My Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaaaa</td>
</tr>
</tbody>
<tfoo
浏览 99提问于2013-08-20得票数 168
回答已采纳
2回答
我有一个表，我不能编辑它的<tfoot> HTML标记，它是用一个不能更改的函数呈现的。因此，我不能在<tr>中更改<tfoot>。
如何使用CSS向右移动红色区域(x1，x2)？
table {
width: 100%;
border-collapse: separate;
}
table td {
border-top: 1px solid red;
}
thead {
background: green;
}
tbody {
background: yellow;
}
tfoot {
background: red
浏览 0提问于2020-11-13得票数 2
回答已采纳
我试着把下面的pre-element HTML转换成post-element HTML。如果使用and和tfoot作为post元素没有意义，那么tbody可以工作。我正在考虑从$('#myTable')开始，并用一个div来包装它。我正在努力解决如何最好地删除页眉和页脚，并将它们插入到相应的表中。谢谢你的建议。
前置元素HTML：
<table id="myTable">
<thead>
<tr>
<th>H1</th>
<t
浏览 1提问于2012-11-12得票数 2
我正在尝试选择表的第一行。注意:第一行包装在thead标记中，因此：
<table>
<thead>
<tr> <!-- first row --> </tr>
</thead>
<tbody>
<tr> <!-- body --> </tr>
</tbody>
<tfoot>
<tr> <!-- body --> </tr>
</tfoot>
<
浏览 0提问于2009-12-13得票数 16
1回答
因此，我有一个XML文档，它描述了这样一个表
<Section Columns="1" Id="2" Name="DataTable">
<DataTable Name="TestDataTable">
<DisplayOptions Column="1" />
<TableOptions Appendable="true" />
<Header Name="tableHeader"&g
浏览 1提问于2013-09-03得票数 0
回答已采纳
1回答
我有一个这样的html表：
<div class="report">
<table>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>
<tr class="row-to-style">...</tr>
</tbody>
<tbody>...</tbody>
&
浏览 5提问于2010-07-19得票数 1
2回答
假设我有下表()：
<table class="data-table">
<thead>
<tr>
<th scope="col">Method</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pickup*</td>
<
浏览 0提问于2011-08-03得票数 3
回答已采纳
使用CSS，我为使用tr:nth-type(奇数)的表设置斑马条纹背景颜色。当然，这是父母的第一个孩子。是否有方法指定这是表的索引，而不是父组？例如，结果如下：
tr:nth-of-type(odd) { background: blue; }
<table>
<thead>
<tr>Blue
<tr>
<tr>Blue
</thead>
<tbody>
<tr>Blue
<tr>
<tr>Blue
</t
浏览 1提问于2014-02-10得票数 2
回答已采纳
我的问题是有点拘谨，
数据库中有事件，每个事件都有自己的开始日期和结束日期，所以我创建了三个表
第一个是开放事件。
第二种是不开放的事件。
最后一个是非公开活动。
因此，我希望创建用于创建表行的foreach循环，并对第二个表行的开始日期进行排序，并对第一个和最后一个表的结束日期进行排序。
还有谢谢
我的尝试：
<table>
<thead>
<tr>
.
.
.
</tr>
<
浏览 2提问于2021-01-27得票数 1
回答已采纳
1回答
我有html表打印与重复页眉和页脚。一切正常，文件自动中断。但是现在我想在任何元素之后打破页面。我使用css属性分页后，并将其设置为“始终”。是的，起作用了，但我有另一个问题。一页接一页，不要重复表格的页眉和页脚。怎么啦？
浏览器: IE8。
打印样式：
table thead {display: table-header-group;}
table tfoot { display: table-footer-group;}
table tbody { display: table-row-group;}
.page-break { page-break-after:always;}
Html
浏览 5提问于2011-07-27得票数 12
我有一个表结构，如下所示。
<table>
<thead>
<tr></tr>
<tr></tr>
</thead>
<tfoot>
<tr></tr>
<tr></tr>
</tfoot>
<tbody>
<tr></tr>
<tr&g
浏览 0提问于2013-06-27得票数 1
回答已采纳
祝大家日安，
这不是真正的问题。但我只想知道是否有另一种方法可以找到特定元素的值。所以我这里有个样本。
<table class="test">
<thead>..</thead>
<tfoot>..</tfoot>
<tbody>
<tr>
<td class="foo>1<td>
<td class="foo>7<td>
<td class="foo>1
浏览 2提问于2013-10-29得票数 0
回答已采纳
6回答
我用鞋带。表td通过引导填充8px。但是我只需要2px填充，所以我使用这个样式表来做布局。
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 2px;
}
我想知道怎样才能更容易地选择td？我是，更奇怪的是
浏览 3提问于2016-12-06得票数 1
回答已采纳
3回答
我正在尝试使用JS将行添加到HTML文件的几个表中。现在有3张桌子。当我尝试单击每个表中的“添加”按钮时，所有3个表中都添加了行，但每次我只需要在每个表中添加一行。我刚刚开始学习超文本标记语言、JQuery等，如果您能给我任何建议，我将不胜感激。提前谢谢你！ 这是我的JS和HTML文件的样子： $(document.getElementById("table1")).ready(function() {
$("#newrows").click(function() {
var addcontrols = "<tr>"
浏览 27提问于2020-04-08得票数 0
回答已采纳
1回答
我试图在<table>下面创建一个图例，其中颜色与引导样式表中定义的颜色相匹配，例如：
.table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.w
浏览 3提问于2016-01-13得票数 1
回答已采纳
2回答
由于注释，我补充说，.vmiddle, .vmiddle td, .vmiddle th在我的情况下不工作，因为我使用的是引导，它用垂直对齐:top定义了.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td；
优先考虑。
我想执行这个css：
.vmiddle,
table.vmiddle th
浏览 5提问于2013-08-14得票数 1
回答已采纳
我对Mozilla版本53.0.2 (32位)有问题。
当我在span中单击以编辑文本时，它会将光标移动到开头。我尝试更改属性和css。我还发现这在以前的版本中是一个错误，但我不知道它是否仍然是一个问题
<td>
<span
class="edit_notes"
style="min-width: 1200px; display: inline-block;display:-moz-inline-box;-moz-user-select: element;"
draggable="false"
id="com
浏览 1提问于2017-05-16得票数 0
2回答
使用id在每个表上应用datatable，但它只触发一个表，并在控制台中给出错误。"Uncaught :无法设置未定义的属性'nTf‘“，而我需要在每个表上显示它。不能应用使用类，因为每个表都有不同的td计数。
例如，我有两个带有id的table1 & table2的表，并将datatable调用为
$('#table1').DataTable()；$('#table2').DataTable()；
如能提供任何帮助，请告知。
我的第一张桌子是
<table id="table1">
<thead&g
浏览 0提问于2015-05-20得票数 1
回答已采纳
使用在此JavaScript中找到的示例，您可以拥有一个自动选择表的按钮。然后，可以将选定的表复制到剪贴板上。
我的用户将把这些数据复制到Excel模板中，而不需要头信息(<th></th>或<thead></thead>)。
我的桌子是这样的：
<table class="sortable">
<thead>
<tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
&
浏览 3提问于2010-09-17得票数 3
回答已采纳
1回答
我有这个CSS：
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th
{
padding: 3px;
}
我如何在一个类中组合这一点？像这样吗？：
.MY_TABLE table>tbody>tr>td, .MY_TABLE table>tbody>tr>th, .M
浏览 9提问于2017-01-20得票数 0
回答已采纳
2回答
我有一些表格嵌套在一个单元格表中，我想用jQuery计算一下那个单元格中有多少个表，可以吗？
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>address</th>
<th>birthday</th>
<th>hoby</th>
<th>country</th&g
浏览 0提问于2012-07-21得票数 0
回答已采纳
在您的源代码中，您可以在tbody之前定义tfoot，但在浏览器中，tfoot仍将显示在最后：
<table>
<thead><tr><th>i get displayed first</th></tr></thead>
<tfoot><tr><td>i get displayed last</td></tr></tfoot>
<tbody><tr><td>i get displayed
浏览 1提问于2013-07-17得票数 1
回答已采纳
Chrome和Firefox
IOS 14上的Mobile Safari
Z-index似乎被忽略了，似乎pseudo elements没有正确地锚定到tbody元素，并且远远超出了其父元素的范围。
如何调整才能使Mobile Safari的行为类似于Chrome和Firefox？我使用pseudo elements来模拟重叠表行的外观。如果不使用这些pseudo elements就可以实现这种外观，这也是一个对我有效的解决方案。
th:first-child, tbody td:first-child {
border-top-left-radius: 1.5re
浏览 0提问于2020-11-19得票数 0
1回答
我在后端生成了一个表。我的任务是在每个标题列中包装文本，并使用.html()和.prepend()将其添加到每个正文列单元格中。它如预期的那样工作(您将看到绿色文本)。
问题:如果一页中有两个独立的表格，它就会一团糟。第一个表中的绿色文本看起来与预期的一样，但它将从第一个表中获取标题文本，并将其添加到第二个表的主体列单元格中，如下所示：
这两个表应该像下面的图像一样
如何解决这个问题，请帮我一把。谢谢
$(document).ready(function() {
$("table thead tr th").each(function(i) {
le
浏览 9提问于2022-07-22得票数 0
回答已采纳
2回答
得到了简单的表，其中我试图多次克隆和插入tbody元素。
问题:克隆的单元格不能正确地与定义的列对齐。(见小提琴曲)
不知道这是怎么回事。我必须用桌子和桌子。
任何帮助都是非常感谢的。
谢谢。
<table class='assignees-form table border none'>
<thead>
<tr>
<th>Assignee</th>
<th>Start</th>
<th>Due</th>
</
浏览 7提问于2016-06-14得票数 1
回答已采纳
0回答
我有一个格式的表格：
<table>
<thead>
<tr>
<td>
some header stuff
</td>
<td>
header 2
</td>
</tr>
</thead>
<tfoot>
<tr>
浏览 0提问于2017-06-13得票数 0
回答已采纳
1回答
当我试图向我的dom添加元素时，它们没有被添加，但是当我console.log它们时，我确实得到了一个值<th class="text-right" rowspan="1" colspan="1"></th>。
for(c=0; c<2; c++) {
console.log(document.getElementById('achats_table').tFoot.children[0].appendChild(document.createElement('th')));
浏览 2提问于2018-05-18得票数 0
回答已采纳
2回答
我正在使用响应表，其中缺少1px的垂直线和水平线。
这是我的CSS & HTML：
.table-responsive {
overflow-x: auto;
min-height: .01%
}
.table-responsive > .table {
margin-bottom: 0
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsiv
浏览 1提问于2016-09-01得票数 0
回答已采纳
如何编写样式表，使特定的div元素在打印输出的每一页的顶部重复？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
thead { display:table-header-group }
tfoot { displ
浏览 2提问于2011-09-12得票数 0
我正在用下面的j查询代码创建一个动态表
下面是我的html表，我将在其中添加带有jquery代码的行
<table id="DataTable" class="table">
<thead>
<tr class="sticky-th">
<th width="2%" id="tdid2"></th>
浏览 0提问于2020-09-03得票数 0
3回答
我正在处理一个具有表布局:固定属性的表，如下面的示例所示：
<table border="1" style="table-layout: fixed; width: 100%">
<thead>
<tr>
<td colspan="4" style="width:100%"> Hello there !</td>
</tr>
<tr>
<
浏览 11提问于2022-03-17得票数 0
回答已采纳
1回答
我使用sorttable.js进行表排序，我的表每3秒由ajax响应更新一次，但响应并不像我预期的那样以排序的方式进行。
索引页
<div id="resDiv">
<table id="myTable1" class="sortable">
<thead>
<tr><th id="person">Person</th><th id="monpay">
浏览 0提问于2014-06-24得票数 0
2回答
我有张桌子：
<div>
<div className="shadow-z-1">
<table className="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
&
浏览 3提问于2017-02-02得票数 0
回答已采纳
3回答
我需要创建一个与HTML表，td，tr发票。我需要这样的东西
发票中的每一项都在新行中，但没有边框。我尝试为tr元素添加一个类
border: 0px solid black;
但它不能正常工作。你能给我一些建议吗？
在此代码段中创建了一个表，但到处都有边框
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid bla
浏览 0提问于2018-05-25得票数 0
回答已采纳
1回答
作为一名测试人员，我需要验证动态表上的总行数。我发现HTML语言最多只能显示22个<tr>。我在表中实际有50行，但是当我在我的自动化上运行以下代码时，它只返回22。当我向下滚动表格上的行时，<tr>上的行会不断变化，但从来没有50行。这会让我的测试失败。
int iRowsCount = driver.findElements(By.XPath("/html/body/app-root/div/***/div[1]/table/tbody/tr")).Count;
如何才能获得正确的行数？
HTML结构是这样的，
<div class=****&
浏览 6提问于2021-07-23得票数 0
1回答
在超文本标记语言中，我们可以使用<tbody>和<thead>。
这与“正常”表一起工作得很好。
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1-1</td>
<td>data1-2</td&
浏览 1提问于2011-08-08得票数 0
回答已采纳
2回答
我发现下面的CSS类句柄突出显示了dataTables中的活动行。
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > th
浏览 3提问于2016-07-25得票数 0
回答已采纳
2回答
我对角JS很陌生，并将JSON之后的JSON绑定到HTML中：
{
"CompanyName": "Company Ltd.",
"Products": [
{
"ProductId": 1245,
"Name": "Trial",
"ProductItems": [
{
"ProductId"
浏览 6提问于2014-05-30得票数 1
回答已采纳
我经常使用THEAD、TBODY和TFOOT元素来将我的数据表划分为可以用CSS单独寻址的部分。我也知道总是有一个隐式的TBODY标签。
让我困惑的是它们必须进入验证的顺序。此表将验证：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang=
浏览 1提问于2011-04-07得票数 22
回答已采纳
1回答
我想使用带边框的引导程序3表，例如使用class="table table-bordered"，这样我就可以在单元格之间设置边框，但是--我不想在表的外部设置任何边框。
我尝试了下面的方法，它似乎对双方都很有效，但考虑到thead和tfoot是可选元素，我想不出一种处理潜在的顶部和底部边框的好方法。我希望能做出一些能解释这些情况的强健的东西，最大限度地利用潜在的资源。
.table-bordered.no-outside-borders {
border: none;
}
.table-bordered.no-outside-borders>thead>t
浏览 3提问于2016-04-14得票数 0
我有一个如下格式的表，当我试图用下面的css修复它的头时，我失去了对齐，表头和表体没有对齐properly..What我能做些什么来克服这个问题。
#ex_table
{
table-layout: fixed !important;
}
#ex_table thead tr
{
position: fixed !important;
}
下面是HTML部分
<div class="table_div" style="height:400px;width:98%;overflow:scroll">
<table id="ex_t
浏览 0提问于2012-11-07得票数 2
回答已采纳
7回答
我有一个简单的html表，其中包含and，tbody和tfoot。我想选择使用javascript或jquery所有的标签只在头部。到目前为止，我找到了一种方法，要么把所有的东西都放在表中，要么把头本身取出来。
我的表格：
<table id="MyTbl" class="display">
<thead>
<tr>
<th>
浏览 0提问于2013-04-08得票数 5
回答已采纳
我有一张智能桌子，像这样
<table st-table="displayedCollection" st-safe-src="FloorData" class="table table-striped">
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="7" class="text-center
浏览 0提问于2017-12-27得票数 0
我正试着把三张桌子都对齐。你可以看到第二个表中的第二列没有与表1和表3对齐。我需要解决这个问题。我正在用ASP.NET Core2.0进行开发，前端使用CSS和Bootstrap。 我已经试着在StackOverFlow上查找帮助了。我使用这个CSS来尝试覆盖该行为。 .table > tbody > tr > td,
.table > tbody > tr > th, .table > tfoot > tr > td,
.table > tfoot > tr > th, .table > thead > t
浏览 23提问于2019-04-12得票数 0
回答已采纳
我有以下示例：
这里的想法是动态创建表，而表中的按钮只在该表中创建行。
<div id="divPrincipal">
</div>
<button id="btnAdd">Add</button>
<script>
var objDivPrincipal = $("#divPrincipal");
var tbl;
$("#btnAdd").click(function () {
createTable();
});
浏览 2提问于2013-11-08得票数 1
回答已采纳
1回答
我在后端生成了一个表。我的任务是在每个标题列中包装文本，并使用.html()和.prepend()将其添加到每个正文列单元格中。它如预期的那样工作(您将看到绿色文本)。
问题:表是在后端生成的，有时表有3列，有时有4列或更多！如何动态地编写Jquery以便在每个表上工作。
请帮我一把。谢谢!
$(document).ready(function() {
var firstHead = $("table thead tr th:first-child").html();
var firstBodyCode = $("<span></span&
浏览 5提问于2022-04-08得票数 0
回答已采纳
1回答
我和SPRFLAT一起使用Boostrap。Boostrap.css文件可以从custom.css文件中重写。
我希望覆盖表> tbody > tr > td元素的行高。
唯一的方法是覆盖以下所有元素。
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tf
浏览 3提问于2014-09-19得票数 3
2回答
我希望一些表标题与中间对齐，而另一些则对齐左边。我尝试了vaiours方法来覆盖in引导程序。但我没能成功。以下是我尝试过的东西：
我创建了一个名为column-center的类。html如下所示：
<thead>
<tr>
<th>Roll#</th>
<th style="width: 20%">First Name</th>
<th style="width: 20%">Middle Name</th>
<th styl
浏览 5提问于2016-08-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
