Question

我有斑马剥离表，我已经可以高亮显示列和行，但出于某种原因，突出显示列中的单元格边框是z-index下面（：after）-element，即使在标题中，单元格背景更高，但是边界仍然在下面。因此，我需要突出斑马剥离表中的行和列并保存单元格边框。 没有javascript 。

HTML：

<table class="table">
    <thead>
        <tr class="table__row table__row_header">
            <th class="table__cell table__cell_header">title 1</th>
            <th class="table__cell table__cell_header">title 2</th>
            <th class="table__cell table__cell_header">title 3</th>
            <th class="table__cell table__cell_header">title 4</th>
            <th class="table__cell table__cell_header">title 5</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table__row table__row_body">
            <td class="table__cell table__cell_body">
                <span class="table__content">text 11</span>
            </td>
            <td class="table__cell table__cell_body">
                <span class="table__content">text 12</span>
            </td>
            <td class="table__cell table__cell_body">
                <div class="table__content">text 13</div>
            </td>
            <td class="table__cell table__cell_body">
                <div class="table__content">text 14</div>
            </td>
            <td class="table__cell table__cell_body">
                <span class="table__content">text 15</span>
            </td>
        </tr>

        <tr class="table__row table__row_body">
            <td class="table__cell table__cell_body">
                <span class="table__content">text 21</span>
            </td>
            <td class="table__cell table__cell_body">
                <span class="table__content">text 22</span>
            </td>
            ...
        </tr>
        ...
    </tbody>
</table>

CSS：

.table {
    overflow: hidden;
    width: 80%;
    margin: 5px auto 5px auto;
    font-size: 16px;
    cursor: default;
}
    .table__row {
        position: relative;
    }
        .table__row_body:nth-child(even) {
            background-color: darkgrey;
        }
        .table__row_body:nth-child(odd) {
            background-color: lightgrey;
        }
    .table__cell {
        position: relative;
        padding: 10px;
        border: 10px solid cadetblue;
        border-collapse: collapse;
    }
        .table__cell_header {
            z-index: 20;
            background-color: darkslategrey;
            color: white;
        }
        .table__cell_body:hover:after {
            position: absolute;
            z-index: 10;
            top: -5000px;
            left: 0;
            width: 100%;
            height: 10000px;
            content: "";
            background-color: lightyellow;
        }
        .table__row_body:hover .table__cell_body {
            background-color: lightgoldenrodyellow;
        }
    .table__content {
        position: relative;
        z-index: 20;
    }

What I need (mostly in Chrome)

Source

Answer 1

找到将高亮颜色更改为边框颜色并使其更透明的解决方案：

background-color: rgba(95,158,160,.5);

而不是

background-color: lightyellow;
background-color: lightgoldenrodyellow;

Result

突出显示斑马剥离表中的行和列并保存单元格边框

1 个答案: