举表最后一行在特定的列

，因为它是在我需要标记今天的日期与特定的边框日历显示。我不知道如何在特定的（今天）列中获得最后一行，并设置border-bottom: 1px solid red;。

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

.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>

来源

2017-03-22 Super Mario' s Yoshi

你可以发布表格的HTML吗？ – mikeg542

我编辑了我的问题，并添加了我的表格代码。 –

这里没有基本的CSS，但我正在检查是否可以使用Sass函数来处理它。我是否有权假定你有3行，th行，td行将有一个.client-today类和一行td没有类的行？或者最后一行是否也有这个类？ – mikeg542

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

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

来源

2017-03-22 15:01:42 Marcelo

我会尝试，并会告诉你结果。 Thx –

这是一个很好的工作，thx！ –

举表最后一行在特定的列

回答

相关问题