CODEWITHSUNDEEP
htmlcss
Tamás Bolvári
Tamás Bolvári

Reputation: 3044

How to make a <col> overrule a <tr> background color?

If I make even rows red and the second column blue, the intersections become red.

I'm trying to make the whole second column blue.

tr:nth-of-type(2n)
{
  background: red;
}
col:nth-of-type(2)
{
  background: blue;
}
<h1>Make <s>cell 17</s> the whole second column blue</h1>
<p>Even if the table has 9999 other rows, which have cells with random rowspans...</p>

<table>
  
  <colgroup>
    <col>
    <col>
  </colgroup>
  
  <tr><td>1<td rowspan="3">2<td>3<td rowspan="2">4<td>5
  <tr><td>6<td>8<td rowspan="2">10
  <tr><td>11<td>13<td>14
  <tr><td>16<td rowspan="2">17<td>18<td>19<td>20
  <tr><td>21<td>23<td>24<td>25
    
</table>

Upvotes: 2

Views: 137

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

best is to select td instead tr and filter td[rowspan].

background col will always be drawn behind tr/td/th anyhow.

example:

tr:nth-of-type(2n) td:not([rowspan])/* if selector do not match, then no background*/
{
  background: red;
}
col:nth-of-type(2)
{
  background: blue;
}
<h1>Make <s>cell 17</s> the whole second column blue</h1>
<p>Even if the table has 9999 other rows, which have cells with random rowspans...</p>

<table>

  <colgroup>
    <col>
    <col>
  </colgroup>

  <tr>
    <td>1
      <td rowspan="3">2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
  <tr>
    <td>16</td>
    <td rowspan="2">17
      <td>18</td>
      <td>19</td>
      <td>20</td>
  </tr>
  <tr>
    <td>21</td>
    <td>23</td>
    <td>24
      <td>25</td>
  </tr>

</table>

Upvotes: 2

sol
sol

Reputation: 22949

ANSWER UPDATED

You can target td[rowspan] to ensure that all rowspans get a background-color. See updated snippet.

tr:nth-of-type(2n)
{
  background: red;
}

td[rowspan] {
  background: blue;
}
<h1>Make <s>cell 17</s> the whole second column blue</h1>
<p>Even if the table has 9999 other rows, which have cells with random rowspans...</p>

<table>
  
  <colgroup>
    <col>
    <col>
  </colgroup>
  
  <tr><td>1<td rowspan="3">2<td>3<td>4<td>5
  <tr><td>6<td>8<td>9<td>10
  <tr><td>11<td>13<td>14<td>15
  <tr><td>16<td rowspan="2">17<td>18<td>19<td>20
  <tr><td>21<td>23<td>24<td>25
    
</table>

Upvotes: 4

Related Questions