引导程序表中特定列的最后一行

Question

I have custom calendar that looks like this:

As it's shown on the calendar I need to mark today's date with a specific border. I'm not sure how I can get last row in specific (today's) column and set border-bottom: 1px solid red; on it.

My custom SCSS code for the table looks like this, the last row in column where td class contains .client-today , I need to add border-bottom: 1px solid red; (but just on last).

.calendar-table {
    border-spacing: 0;
    width: 100%;
    table-layout: fixed;
    empty-cells: show;
    td {
        text-align: center;
        &:first-child {
            text-align: left;
            padding: 5px;
        }
    }
    th {
        text-align: center;
        padding: 5px;
        &:first-child {
            width: 15%;
        }
    }
    .today {
        border-bottom: 2px solid #C22;
    }
    .client-today {
        border-right: 2px solid #C22 !important;
        border-left: 2px solid #C22 !important;
    }
    .checked {
        border: none;
        cursor: pointer;
        background-color: rgba(255, 234, 234, 1);
        background: linear-gradient(to bottom, rgba(255, 234, 234, 1) 0%, rgba(255, 193, 193, 1) 100%);
    }
    .is-switch {
        border: none;
        cursor: pointer;
        z-index: 2;
        background-color: #ffc578;
        background: linear-gradient(to bottom, #ffc578 0%, #fb9d23 100%);
    }
    .attendant-name {
        position: absolute;
        top: 5px;
        width: 140px;
        z-index: 1;
        text-align: left;
        padding-left: 5px;
    }
    &.table-hover > tbody > tr:hover {
        background-color: #f2f9fe;
        background: linear-gradient(to bottom, #f2f9fe 0%, #d6f0fd 100%);
    }
}

<table class="calendar-table table-bordered table-hover">
    <thead>
        <tr>
            <th>Clients</th>
            <th ng-class="{'today': day.today}" ng-repeat="day in $ctrl.days track by $index">
                {{day.dateView}}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr dir-paginate="item in $ctrl.calendar | itemsPerPage: $ctrl.pageSize track by $index " total-items="$ctrl.totalItems">
            <td>
                {{item.name}}
            </td>
            <td style="position: relative" ng-click="$ctrl.openEvent(day)" ng-class="{ 'checked': day.checked, 'is-switch' : day.isSwitch, 'client-today': day.today }" ng-repeat="day in item.calendar track by $index">
                <div ng-if="day.attendantName" class="attendant-name">{{day.attendantName}}</div>
                <i ng-if="day.isSwitch" class="fa fa-car" aria-hidden="true"></i>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

You can use the last-child CSS selector.

tbody tr:last-child .client-today {
  border-bottom: 1px solid red;
}