如何将 CSS 应用于最后一个 tr 的第一个 td

Posted 2023-03-06

【中文标题】如何将 CSS 应用于最后一个 tr 的第一个 td

【英文标题】：How to apply CSS to first td of last tr

【发布时间】：2014-08-19 12:32:19

【问题描述】：

我需要在动态添加 tbody 内容的表格中更改最后一个 tr 的第一个 td 的宽度。

我的代码：

<table id="items">
<tr>
<th>SL.No.</th>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table> 

我需要将列 slno 设置为 50px，我的意思是所有三行的第一个 td 的宽度，我还需要将最后一行的第一个 td 的宽度设置为 500 px。我该怎么做？

我是这样做的：

#items tbody tr:last-child td:first-child 
width:500px;

但它不起作用。

请帮忙。

【问题讨论】：

设置任何td的宽度也会将其他行的宽度设置为相同的td。

那里“不工作”是什么意思？这段代码没问题，你在 CSS 中工作，最后一行的第一个 TD。它是表格，因此您可以设置所有第一个 TD 的宽度。

-1 表示不工作。

我的意思是说不工作是，我只需要在最后一行设置第一个 td 的宽度。但是使用我当前的代码，它将宽度设置为所有行中的所有第一个 td。那是说我的代码没有按我的需要工作。

在 html 表格中，列宽由多步算法确定，如下所述：w3.org/TR/CSS21/tables.html#width-layout 列宽由“最宽”的表格单元格确定，该宽度会影响所有表格列中的单元格，无论最宽的表格单元格位于哪一行。您所要求的无法完成，因为表格不是按这种方式设计的。

【参考方案1】：

试试这个：

css

#items tr:last-child td:first-child
    width:500px;


#items tr td:first-child
    width:50px;

fiddle

【参考方案2】：

这个应该可以解决你的问题。

tr:last-child>td:first-child 
width:500px;

【讨论】：

这应该是动态改变last tr的第一个td。

【参考方案3】：

如果您希望单元格的宽度比其他单元格宽，请使用colspan。

这里有一个例子：http://www.w3schools.com/tags/att_td_colspan.asp

HTML

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$100</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>