Bootstrap CSS 中的最后一列绿色

Question

正在尝试将 table 的最后一列着色为绿色。

我有一个 table，它使用 Bootstrap 样式（它是 ASP.Net）并希望最后一列为绿色。 table 比这长，但它在 headers 中是 'Group 5' 并且每个 tr.

中的最后一个值

<div class="table-responsive">
    <table class="table table-striped table-bordered table-sm table-light border-primary">
        <thead>
            <tr>
                <th scope="col">Date</th>
                <th scope="col">Group1</th>
                <th scope="col">Group2</th>
                <th scope="col">Group3</th>
                <th scope="col">Group4</th>
                <th scope="col">Group5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">2022-03-14</th>
                <td>52900</td>
                <td>6530</td>
                <td>2957</td>
                <td>778</td>
                <td>15947</td>
            </tr>
            <tr>
                <th scope="row">2022-03-21</th>
                <td>52900</td>
                <td>6530</td>
                <td>2957</td>
                <td>778</td>
                <td>15947</td>
            </tr>
        </tbody>
    </table>
</div>

最后的 table 会有更多行，但我总是希望最后一列是彩色的。

Answer 1

您可以为此使用 :last-of-type。 https://developer.mozilla.org/en/docs/Web/CSS/:last-of-type

.table thead th:last-of-type,
.table tbody td:last-of-type {
  background-color: lightgreen;
}

Bootstrap CSS 中的最后一列绿色

Last Column green in Bootstrap CSS

css

asp.net

bootstrap-4