css - Bootstrap 4.0 如何获得条纹列而不是条纹行

Question

当前实现的我的表如下所示:

因为我的数据表示是垂直的，所以我希望将列设置为条纹状或至少在鼠标悬停在列上时引入一些 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 中是否有一个类可以使列 strip 化？如果不是，突出显示它们的 CSS 方法是什么？

Answer 1

来源:CSS Tricks

使用以下内容为我提供列突出显示。

/*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;
}

效果很好。