如何处理`rowspan`和表中的背景颜色？ [英] How to deal with `rowspan` and background colors within a table?

问题描述

我有一个通用的HTML表格，有一些CSS背景颜色样式。当用户将鼠标悬停在某一行时，该行中所有单元格的背景颜色将变为浅灰色。

I have a generic HTML table with some CSS background color styling. When a user hovers over a row, the background color of all cells in that row is changed to a light gray.

我的顶行有一个单元格，行。当我悬停在顶行时，单元格被适当地遮蔽。但是，当悬停在第二行和第三行时，单元格没有阴影。

I have a cell in my top row that spans three rows. When I hover over the top row, the cell is shaded appropriately. However, when hovering over the second and third rows, the cell is not shaded.

是否可以将单元格遮住第2行或第3行？我将如何做？

Is it possible to shade the cell within the 2nd or 3rd row? How would I do that?

相关代码：

style.css

style.css

td {
    border: black 1px solid;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

tr:hover td {
    background-color: #DDD;
}

th {
    border: none;
}

table.html

table.html

<tr>
    <td>Row 1:Col 1</td>
    <td>Row 1:Col 2</td>
    <td rowspan="3">Row 1/2/3:Col3</td>
</tr>
<tr>
    <td>Row 2:Col 1</td>
    <td>Row 2:Col 2</td>
</tr>
<tr>
    <td>Row 3:Col 1</td>
    <td>Row 3:Col 2</td>
</tr>

推荐答案

p>

It can be accomplished using JavaScript like so:

<style type="text/css">
td {
    border: black 1px solid;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px
}

tr:hover td {
    background-color: #DDDDDD;
}

th {
    border: none;
}

</style>
<script type="text/javascript">

function shadeCell( cellName )
{
    document.getElementById(cellName).style.backgroundColor = '#DDDDDD';
}

function unShadeCell( cellName )
{
    document.getElementById(cellName).style.backgroundColor = '';
}

</script>
<table>
<tr onMouseOver="shadeCell('bigCell')" onMouseOut="unShadeCell('bigCell')">
    <td>Row 1:Col 1</td>
    <td>Row 1:Col 2</td>
    <td rowspan="3" id="bigCell">Row 1/2/3:Col3</td>
</tr>
<tr onMouseOver="shadeCell('bigCell')" onMouseOut="unShadeCell('bigCell')">
    <td>Row 2:Col 1</td>
    <td>Row 2:Col 2</td>
</tr>
<tr onMouseOver="shadeCell('bigCell')" onMouseOut="unShadeCell('bigCell')">
    <td>Row 3:Col 1</td>
    <td>Row 3:Col 2</td>
</tr>
</table>

我不知道如何通过纯HTML / CSS来完成你想要的。 Btw，你可以使用jQuery简化上面的JavaScript - 可以节省你一些打字。

I am not sure how one can accomplish what you want by just plain HTML / CSS. Btw, you can simplify the above JavaScript using jQuery - would save you some typing.

Best，
Kamran

Best, Kamran

这篇关于如何处理`rowspan`和表中的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！