Set border of last element of a table based on background

Mohan

New Member
#1
I have a table which simply displays key-value pairs. The HTML code for the same is:
Mã:
<div class="kvp-data-table">
<div class="table-container" *ngFor="let keyValuePair of keyValuePairs; let i = index">
    <div class="key-value-container"
         fxFlex
         fxLayout="row">
        <div class="key-container"
             [fxFlex]="widthOfColumnInPercent">
            {{ keyValuePair.key | translate}}
        </div>
        <div class="separator">
        </div>
        <div class="value-container"
             [fxFlex]="widthOfColumnInPercent">
            {{ keyValuePair.value | translate}}
        </div>
    </div>
</div>
Now for this table I want to color the alternate rows with different color. For that I am using the :nth-child() CSS selector as follows:
Mã:
.kvp-data-table {

.separator {
    width: 2px;
    background: #E2E2E2;
}

.key-container {
    padding: 12px;
    font-family: '72';
    word-wrap: break-spaces;
}

.value-container {
    padding: 12px;
    font-family: '72';
    word-wrap: break-spaces;
}

.table-container:nth-child(2n) {
    background: #FFFFFF;
}

.table-container:nth-child(2n+1) {
    background: #F2F2F2;
}
}
In addition to this I want to end the table with a horizontal grey line if the last row has a white background. If the table is outputting a list with even number of elements, the last row will have a white background.

Now I know that the :last-child() selector exists, but I don't know how it will be applied here conditionally.

How do I achieve this?
 

Admin

Administrator
Thành viên BQT
#2
You could use :last-child:not:)nth-child(even))

Also, instead of :nth-child(2n) and :nth-child(2n+1) you could use :nth-child(even) and :nth-child(odd)

Putting it together:
Mã:
.table-container:nth-child(even) {
  background: #FFFFFF;
}

.table-container:nth-child(odd) {
  background: #F2F2F2;
}

/* .table-container:last-child:nth-child(odd) also obtains */
.table-container:last-child:not(:nth-child(even)) {
  border-bottom: 2px solid grey;
}
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top