Bootstrap 4.0 how to get striped columns instead striped rows

Question

My Table with the current implementation looks like the following:

Because my Data representation is vertical I wish to make the columns striped or atleast introduce some CSS hovering of the column when the mouse is on the column.

My Code for the above mentioned table:

<div class="table-responsive">
            <table class="table table-sm table-bordered">
              <thead>
                <tr>
                    <th>
                        Properties
                    </th>
                    <th *ngFor="let row of tableResult?.rows; let i=index" scope="col">
                        Result #{{i+1}}
                    </th>
                </tr>
              </thead>
                <tbody>
                    <tr *ngFor="let column of tableResult?.columns; let cind=index">
                        <th scope="row">{{column}}</th>
                        <td *ngFor="let row of tableResult?.rows">{{row[cind]}}</td>
                    </tr>
                    <tr>
                        <th>More Info.</th>
                        <td scope="row" *ngFor="let uuid of tableResult?.uuids">
                            <button class="btn btn-xs btn-outline-success">
                                More
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

I am not sure whether do I need to add colgroup to make columns recognizable.

Is there a class in Bootstrap to make the columns striped? If not what is the CSS way to highlight them?

Answer 1

来源：CSS Tricks

使用以下内容为我提供了Column Highlighting。

/*Column Highlighting*/
table {
    overflow: hidden;
}

td, th {
    position: relative;
}
td:hover::after,
th:hover::after {
    content: "";
    position: absolute;
    background-color: rgba(0,0,0,0.075);
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
}

运作良好。