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 класс для полосатых столбцов?Если нет, то как CSS выделить их?

Answer 1

Источник : Трюки CSS

, используя следующее, обеспечивает выделение столбцов.

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

Работает хорошо.