Question

我有一张桌子。

它目前包含thead，tbody和tfoot部分。

我想定位表格中的最后一行（tr）。

如果我使用$(document).ready(function() { $('ul').append(" <li class='fusion-custom-menu-item fusion-main-menu-search fusion-last-menu-item'> <a class='fusion-main-menu-icon'></a> <div class='fusion-custom-menu-item-contents'> <form action='http://www.heilmancenter.com/' method='get' class='searchform' role='search'> <div class='search-table'> <div class='search-field'> <input type='text' placeholder='Search ...' class='s' name='s' value=''> </div> <div class='search-button'> <input type='submit' value='' class='searchsubmit'> </div> </div> <input type='hidden' value='en' name='lang'> </form> </div> </li> "); });，则会导致3行定位：

这是因为它的目标是thead中的最后一个tr，tbody中的最后一个tr，以及tfoot中的最后一个tr。

我不希望它以3行为目标。我只希望它以目标中的最后一行为目标。

我可以使用tr:last-of-type，只要tfoot中至少有一个tr元素，它就会起作用：

但是，如果tfoot为空，或者表缺少tfoot元素，则不会有任何目标。

我想始终只使用CSS来定位表的绝对最后一行。我怎么能这样做？

Answer 1

另一种方式。

table
{
   border-collapse:collapse;
}
tr{
   border-bottom: 1px solid #000;
}

table :last-child >:last-child > td {
   background-color: red
}

<table>
  <tr>
<td>a
</td>
<td>a
</td>
  </tr>
  <tr>
<td>b
</td>
<td>b
</td>
  </tr>
  <tr>
<td>v
</td>
<td>v
</td>
  </tr>
</table>
--------------
<table>
  <tr>
<td>a
</td>
<td>a
</td>
  </tr>
  <tr>
<td>b
</td>
<td>b
</td>
  </tr>
  <tr>
<td>v
</td>
<td>v
</td>
  </tr>
  <tfoot>
<tr>
  <td>v
  </td>
  <td>v
  </td>
</tr>
  </tfoot>
</table>
------------

<table>
  <thead>
<tr>
  <td>r</td>
  <td>r</td>
</tr>
  </thead>
  <tr>
<td>a
</td>
<td>a
</td>
  </tr>
  <tr>
<td>b
</td>
<td>b
</td>
  </tr>
  <tr>
<td>v
</td>
<td>v
</td>
  </tr>
  <tfoot>
<tr>
  <td>v
  </td>
  <td>v
  </td>
</tr>
  </tfoot>
</table>

解决方案很简单。首先，在我的代码段table中添加表格。然后你必须解决最后一个元素，因为我们有三个leveles（thead or tbody or tfoot＆gt; td＆gt;'tr'）我们需要解决最后一个元素3次

Answer 2

总是以最后一行为目标的一种简单方法，无论它在哪里＆＃39;简直就是

＆＃13;

table > *:last-child > tr:last-of-type {
	background-color: #0f0;
}

＆＃13;

<table>
	<thead>
		<tr>
			<th>A</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>a</td>
		</tr>
		<tr>
			<td>b</td>
		</tr>
	</tbody>
</table>

<table>
	<thead>
		<tr>
			<th>A</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>a</td>
		</tr>
		<tr>
			<td>b</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>c</td>
		</tr>
	</tfoot>
</table>

＆＃13;

这会做你所描述的，尽管有一个问题。不会强制执行<thead>，<tbody>和<tfoot>元素的顺序，因此您实际上可能会在<tfoot>之前放置一个<tbody>，其输出与输出相同，在这种情况下，字面意思是最后<tr>将被选中，这在视觉上不是最后<tr>。

这需要一些额外的诡计：

/* the optimistic true last <tr> */
table > :last-child > tr:last-of-type,
/* any last <tr> within a <tfoot> */
table tfoot > tr:last-of-type {
    background-color: #0f0;
}

/* reset any style in the true last <tr> if its parent is
   preceded by a `<tfoot>` */
table > tfoot ~ :last-child > tr:last-of-type {
    background-color: initial;
}

working fiddle

编辑：我忘了考虑空的<tfoot>元素，这需要使用:not和:empty伪类（旧浏览器不支持），这看起来像：

/* the optimistic true last <tr> */
table > :last-child > tr:last-of-type,
/* any last <tr> within a <tfoot> */
table tfoot > tr:last-of-type {
    background-color: #0f0;
}

/* reset any style in the true last <tr> if its parent is
   preceded by a `<tfoot>` */
table > tfoot:not(:empty) ~ :last-child > tr:last-of-type {
    background-color: initial;
}

updated fiddle

Answer 3

完全编辑我的答案。对于那个很抱歉。这里的问题是你无法判断最后一行是否有任何CSS内容。

所以纯粹使用CSS是行不通的，因为即使它是空的，行仍然存在。因此，它将成为最后一排的造型，其中没有任何内容。我会查看Javascript，或者如果您正在生成此服务器端，请在最后一行添加一个类，以便您可以自定义样式。

Answer 4

不确定表达目标中最后一行的含义。

如果你想定位最后一个脚，你会使用：

 table tfoot tr:last-of-type

如果你想定位tbody中的最后一行，你会使用：

table tbody tr:last-of-type

如果你想定位thead中的最后一行，你会使用：

table thead tr:last-of-type

如果你想要定位tfoot中的最后一行，除非它是空的，你想要定位tbody中的最后一行，那么你将需要使用JavaScript。

这是一个小提琴链接，供您查看代码。 Fiddle Link

如何正确定位使用tfoot，tbody和thead的表中的最后一个tr？

4 个答案: