如何使用 CSS 突出显示表格中的行和列？

列、列组和行的 CSS 突出显示增强了交互式表格

高表格通常设计用于显示复杂的数据组织，其中视觉突出显示特定部分可以增强用户的理解。传统上，:hover 伪类应用于单个元素，例如表格单元格。但是，可以使用 CSS 将此功能扩展到对元素（例如列或行）进行分组。

使用 ::before 和 ::after 伪元素

通过利用 :: before 和 ::after 伪元素，突出显示可以应用于所选元素之外。这些元素本质上创建了可以相对于其父元素放置的虚拟元素。

将突出显示应用于行和列

要将突出显示应用于行和列，请使用以下步骤：

• 为行和列创建 ::before 和 ::after 伪元素。
• 使用背景颜色设置它们的样式以指示突出显示。
• 使用绝对定位和溢出以确保突出显示超出单元格边界。
• （可选）添加类来区分行和列突出显示以进行自定义。

示例实现

CSS:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .row, .col {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><table>
    <tr>
        <th></th>
        <th class="col">50kg</th>
        <th class="col">55kg</th>
        <th class="col">60kg</th>
        <th class="col">65kg</th>
        <th class="col">70kg</th>
    </tr>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #ffa; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

HTML:

此方法提供了一种灵活且可自定义的解决方案，用于突出显示表中的行和列。

以上是如何使用 CSS 突出显示表格中的行和列？的详细内容。更多信息请关注PHP中文网其他相关文章！