I am working on a customized calendar design that features various styling elements:
https://i.sstatic.net/12cuW.png
One of the requirements for this calendar is to highlight today's date with a specific border. To achieve this, I need to target the last row in the column corresponding to today's date and apply border-bottom: 1px solid red; to it.
The SCSS code snippet below illustrates how I have styled the table. Specifically, I aim to add a bottom border of 1px solid red to the last row within the column where the td element has the class .client-today (but only for the last row).
.calendar-table {
// CSS properties
}
<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>