There is a JSBin.

Question

有没有办法让CSS突出显示整行，包括行内的单元格，而不仅仅是第一行？

从示例中可以看出，只有行的第一行突出显示而不是其他单元格，这显然看起来很混乱，我宁愿能够使用CSS清除它，但会使用Javascript如果没有别的办法。

HTML

<table class="tb" style="width: 100%;" border="1" cellpadding="10" cellspacing="10">
  <tbody>
    <tr>
      <td>Package</td>

      <td>Includes</td>

      <td>Number of recruits</td>

      <td>Cost per recruit + VAT</td>
    </tr>

    <tr>
      <td rowspan="4">Lorem ipsum dolor sit amet</td>

      <td rowspan="4">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£105</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£120</td>
    </tr>

    <tr>
      <td>6–9</td>

      <td>£135</td>
    </tr>

    <tr>
      <td>1–5</td>

      <td>£150</td>
    </tr>

    <tr>
      <td rowspan="4">Lorem ipsum dolor sit amet</td>

      <td rowspan="4">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£175</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£200</td>
    </tr>

    <tr>
      <td>6–9</td>

      <td>£225</td>
    </tr>

    <tr>
      <td>1–5</td>

      <td>£250</td>
    </tr>

    <tr>
      <td rowspan="2">Lorem ipsum dolor sit amet</td>

      <td rowspan="2">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£220 (40% payable upfront)</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£275 (40% payable upfront)</td>
    </tr>

    <tr>
      <td rowspan="2">Lorem ipsum dolor sit amet</td>

      <td rowspan="2">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£300 (40% payable upfront)</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£375 (40% payable upfront)</td>
    </tr>

    <tr>
      <td>Lorem ipsum dolor sit amet</td>

      <td>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td><br /></td>

      <td><br /></td>
    </tr>
  </tbody>
</table>

CSS：

body {
  padding: 50px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
   padding: 20px;
  border: 1px solid black;
}


tr:hover td {
    background-color: blue;
}

Answer 1

There is a JSBin.

我省略了您的零件代码，只是为了便于显示。

问题的关键在于<tbody>。表格必须为<thead>，但可以有多个<tbody>。所以，使用这些代码：

tbody:hover .td {
    background-color: blue;
}

Answer 2

我根据我对Todd Mark答案的评论来更新我的答案。如上所述，和AFAICT一样，该解决方案只有在表有两个主要行时才有效，但如果有更多行则不行。对于两个以上的主要行，如果没有JS，我没有看到任何其他方法。实际上，我可以想到两种方法：

方式1（HTML＆amp; jQuery）：

您可以手动为HTML中的每个主行添加一个不同的css类，如下所示：

HTML：

<table class="tb" style="width: 100%;" border="1" cellpadding="10" cellspacing="10">
    <thead>
        <th>Package</th>
        <th>Includes</th>
        <th>Number of recruits</th>
        <th>Cost per recruit + VAT</th>
    </thead>
    <tbody>
        <tr class="row-1">
            <td rowspan="4">Lorem ipsum dolor sit amet</td>
            <td rowspan="4">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>
            <td>20+</td>
            <td>£105</td>
        </tr>
        <tr class="row-1">
            <td>10–19</td>
            <td>£120</td>
        </tr>
        <tr class="row-1">
            <td>6–9</td>
            <td>£135</td>
        </tr>
        <tr class="row-1">
            <td>1–5</td>
            <td>£150</td>
        </tr>
        <tr class="row-2">
            <td rowspan="4">Lorem ipsum dolor sit amet</td>
            <td rowspan="4">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>
            <td>20+</td>
            <td>£175</td>
        </tr>
        <tr class="row-2">
            <td>10–19</td>
            <td>£200</td>
        </tr>
        <tr class="row-2">
            <td>6–9</td>
            <td>£225</td>
        </tr>
        <tr class="row-2">
            <td>1–5</td>
            <td>£250</td>
        </tr>
        <tr class="row-3">
            <td rowspan="2">Lorem ipsum dolor sit amet</td>
            <td rowspan="2">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>
            <td>20+</td>
            <td>£220 (40% payable upfront)</td>
        </tr>
        <tr class="row-3">
            <td>10–19</td>
            <td>£275 (40% payable upfront)</td>
        </tr>
        <tr class="row-4">
            <td rowspan="2">Lorem ipsum dolor sit amet</td>
            <td rowspan="2">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>
            <td>20+</td>
            <td>£300 (40% payable upfront)</td>
        </tr>
        <tr class="row-4">
            <td>10–19</td>
            <td>£375 (40% payable upfront)</td>
        </tr>
        <tr class="row-5">
            <td>Lorem ipsum dolor sit amet</td>
            <td>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>
            <td>
                <br />
            </td>
            <td>
                <br />
            </td>
        </tr>
    </tbody>
</table>

并使用以下jQuery代码进行悬停效果：

jQuery的：

jQuery(function ($) {
    var tableRowClasses = function (sel) {
        sel = $(sel);
        $.each(sel, function (i, v) {
            // Bind hover event handler
            $(v).hover(function () {
                var ta = "." + $(v).attr("class");
                $(".hover").removeClass("hover");
                $(ta).addClass("hover");
            });
        });
    };
    $(document).ready(function () {
        tableRowClasses(".tb tr");
    });
});

的jsfiddle：

JSFiddle供参考。

方式2（仅限jQuery）：

或者，您可以使用纯jQuery方法动态地将css类添加到每一行：

HTML：

<table class="tb" style="width: 100%;" border="1" cellpadding="10" cellspacing="10">
    <tbody>
        <tr>
            <td>Package</td>
            <td>Includes</td>
            <td>Number of recruits</td>
            <td>Cost per recruit + VAT</td>
        </tr>
        <tr>
            <td rowspan="4">Lorem ipsum dolor sit amet</td>
            <td rowspan="4">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>
            <td>20+</td>
            <td>£105</td>
        </tr>
        <tr>
            <td>10–19</td>
            <td>£120</td>
        </tr>
        <tr>
            <td>6–9</td>
            <td>£135</td>
        </tr>
        <tr>
            <td>1–5</td>
            <td>£150</td>
        </tr>
        <tr>
            <td rowspan="4">Lorem ipsum dolor sit amet</td>
            <td rowspan="4">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>
            <td>20+</td>
            <td>£175</td>
        </tr>
        <tr>
            <td>10–19</td>
            <td>£200</td>
        </tr>
        <tr>
            <td>6–9</td>
            <td>£225</td>
        </tr>
        <tr>
            <td>1–5</td>
            <td>£250</td>
        </tr>
        <tr>
            <td rowspan="2">Lorem ipsum dolor sit amet</td>
            <td rowspan="2">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>
            <td>20+</td>
            <td>£220 (40% payable upfront)</td>
        </tr>
        <tr>
            <td>10–19</td>
            <td>£275 (40% payable upfront)</td>
        </tr>
        <tr>
            <td rowspan="2">Lorem ipsum dolor sit amet</td>
            <td rowspan="2">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>
            <td>20+</td>
            <td>£300 (40% payable upfront)</td>
        </tr>
        <tr>
            <td>10–19</td>
            <td>£375 (40% payable upfront)</td>
        </tr>
        <tr>
            <td>Lorem ipsum dolor sit amet</td>
            <td>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>
            <td>
                <br />
            </td>
            <td>
                <br />
            </td>
        </tr>
    </tbody>
</table>

jQuery的：

jQuery(function ($) {
    var tableRowClasses = function (sel) {
        var num = 0;
        sel = $(sel);
        $.each(sel, function (i, v) {
            // Bind hover event handler
            $(v).hover(function () {
                var ta = "." + $(v).attr("class");
                $(".hover").removeClass("hover");
                $(ta).addClass("hover");
            });
            // Add row classes
            var hasClass = typeof $(v).attr("class") !== "undefined";
            if (hasClass && $(v).attr("class").search(/row/) > -1) return true;
            else {
                var css = "row-" + num;
                $(v).addClass(css);
                if ($(v).find("td[rowspan]").length > 0) {
                    var rowS = parseInt($($(v).find("td[rowspan]")[0]).attr("rowspan"), 10),
                        start = $.inArray(v, sel);
                    for (i = start; i < start + rowS; i++) {
                        $(sel[i]).addClass(css);
                    }
                }
                num++;
            }
        });
    };
    $(document).ready(function () {
        tableRowClasses(".tb tr");
    });
});

的jsfiddle：

JsFiddle供参考。

在这两种情况下：

每个解决方案都需要以下css代码才能工作：

CSS：

.hover {
    background-color: blue;
}

仅使用CSS突出显示表行中的所有行

2 个答案:

There is a JSBin.

方式1（HTML＆amp; jQuery）：

HTML：

jQuery的：

的jsfiddle：

方式2（仅限jQuery）：

HTML：

jQuery的：

的jsfiddle：

在这两种情况下：

CSS：