使用CSS仅突出显示表行中的所有行跨 [英] highlighting all rowspans within a table row using CSS only

问题描述

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

Is there a way of getting the CSS to highlight the entire row, including the cells within the rowspans, rather than just the first line?

从示例中，只有行的第一行是突出显示，但不是其他单元格，这显然看起来很杂乱，我宁愿能够清除它使用CSS，但将使用Javascript，如果没有其他方式。

As you can see from the example, only the first line of the row is highlighted but not the other cells, this obviously looks quite messy, and I would rather be able to clear it up using CSS only, but will use Javascript if there is no other way.

http://codepen.io/anon/pen/jErMee

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

推荐答案

有一个JSBin。

我省略了你的部分代码，

There is a JSBin.

I omit your part code, just for easily display.

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

The key of the issue is about <tbody>. A table must have a <thead>,but can have many <tbody>. So, use these code:

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

这篇关于使用CSS仅突出显示表行中的所有行跨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！