Question

我有自定义日历，如下所示：

如日历所示，我需要在今天的日期标记特定边框。我不确定如何在特定（今天的）列中获取最后一行并在其上设置border-bottom: 1px solid red;。

我的表的自定义SCSS代码如下所示，td类包含.client-today的列中的最后一行，我需要添加border-bottom: 1px solid red;（但只是在最后）。< / p>

.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

您可以使用last-child CSS选择器。

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

Bootstrap表在特定列的最后一行

1 个答案: