<div class="table-responsive">
    <table class="table-sm table-striped table-bordered">
        <thead class="table-head" *ngIf="tableHeader">
            <tr class="table-row">
                <th class="column-name upper-row" [colSpan]="getColLength(tabledata)" scope="colgroup"
                    *ngFor="let tabledata of tableHeaderFirstRow" [innerHTML]="tabledata">
                </th>
            </tr>
            <tr class="table-row">
                <ng-container *ngFor="let tabledata of tableHeaderSecondRow; let i=index">
                    <th class="column-name bottom-row" scope="col" (click)="sortColumn(tabledata.name)"
                        [ngClass]="{'selected-col': i==sortedColumn}">
                        <div class="col-sortable">
                            <div class="col-value" [title]="tabledata.name">
                                <span class="header-symbol" [innerHTML]="tabledata.symbol"
                                    *ngIf="tabledata.symbol"></span>
                                <span *ngIf="tabledata.unit">[<span [innerHTML]="tabledata.unit"></span>]</span>
                            </div>
                            <div class="sort-direction" *ngIf="sortDir=='DESCENDING' && sortedColumn==i"><i
                                    class="fas fa-chevron-up"></i></div>
                            <div class="sort-direction" *ngIf="sortDir=='ASCENDING' && sortedColumn==i"><i
                                    class="fas fa-chevron-down"></i></div>
                        </div>
                    </th>
                </ng-container>
            </tr>
        </thead>
        <tbody class="table-body">
            <tr class="table-row" *ngFor="let document of documentList.documents" [routerLink]="getPdpLink(document)" [ngClass]="{'disabled-link': !getPdpLink(document)}">
                <ng-container *ngFor="let cellData of document.table_values; let i=index">
                    <td [ngClass]="{'column-value': true, 
                                    'selected-col': i==sortedColumn, 
                                    'column-value--bold': i==0 }">
                        <span class="column-value--triangle" *ngIf="tableHeaderSecondRow[i].popular_item"
                            [ngClass]="{'invisible': !document.popular_item}"><i class="fas fa-play"></i></span>
                        <span [ngClass]="{'column-value--blue': tableHeaderSecondRow[i].explorer && document.explorer}">
                            {{cellData}}
                        </span>
                    </td>
                </ng-container>
            </tr>
        </tbody>
    </table>
</div>

<div class="legend">
    <ul class="list-group list-group-horizontal legend-labels">
        <li class="list-group-item label blue" *ngIf="explorerLabel">
            <i class="fas fa-square-full"></i>
            {{explorerLabel}}
        </li>
        <li class="list-group-item label triangle" *ngIf="popularItemLabel">
            <i class="fas fa-play popular-item"></i>
            {{popularItemLabel}}
        </li>
    </ul>
</div>

./product-table.component.scss

@import "src/app/styles/helpers";

.table-sm {
    width: 100%;

    @include media-breakpoint-up(sd) {
        .table-head .column-name { @include font-size(14); }
        .table-body .column-value {
            @include font-size(12);
            line-height: 20px;
        }
    }
    
    @include media-breakpoint-down(sd) {
        .table-head .column-name { @include font-size(16); }
        .table-body .column-value {
            @include font-size(12);
            line-height: 25px;
        }
    }
    
    .no-border-left {
        padding: 0px;
        border-left: none;
    }
    
    .no-border-right {
        border-right: none;
    }

    .table-head {
        background-color: $blue;
        color: white;

        .column-name {
            vertical-align: middle;
            font-weight: normal;

            &.bottom-row {
                cursor: pointer;
                &:hover {
                    background-color: $dark-blue;
                }
            }

            &.selected-col {
                background-color: $dark-blue;
            }

            .header-symbol {
                margin-right: 5px;
            }

            .sort-direction {
                margin-left: 3px;
            }

            .col-sortable {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 100%;
                height: 100%;
                align-items: center;
                @include font-size(14);

                .col-value {
                    width: calc(100% - 13px);
                }
            }
        }
    }

    .table-body {
        .table-row {
            cursor: pointer;
            &:nth-child(odd) .selected-col {
                background-color: $light-green;
            }
            &:nth-child(even) .selected-col {
                background-color: $off-white;
            }

            &:hover {
                .column-value {
                    background-color: $light-blue !important;
                }
            }

            .column-value {
                @include font-size(12);
                color: $cool-grey;

                &--blue {
                    color: $dark-blue;
                }
    
                &--triangle {
                    @include font-size(8);
                    margin-right: calc-rem(3);
                }

                &--bold {
                    font-weight: bold;
                }

                .popular-item {
                    width: calc-rem(20);
                }
            }
        }
    }
}

.legend {
    position: absolute;
    top: calc-rem(-30);
    right: calc-rem(15);

    &-labels {
        @include font-size(14);

        .label {
            padding: 0 calc-rem(15);
            border: none;

            &:last-child {
                padding-right: 0;
            }
        }

        .blue {
            i {
                margin-right: calc-rem(3);
                color: $dark-blue;
            }
        }

        .popular-item {
            @include font-size(10);
            margin-right: calc-rem(3);
        }
    }

}