Bootstrap 4.0如何获取条带化列而不是条带化行

当前实现的表如下所示:

因为我的数据表示是垂直的,所以我希望使列条带化,或者至少在鼠标在列上时引入一些css悬停。

上表的代码:

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

我不确定是否需要添加 colgroup 使列可识别。

bootstrap中是否有一个类使列条带化?如果不是,css用什么方法来突出显示它们?