如何使背景颜色成为一种背叛?

时间:2016-12-14 18:41:52

标签: html css

如果我使偶数行为红色而第二列为蓝色,则交叉点变为红色。

我正在尝试将整个第二列设为蓝色。

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>

2 个答案:

答案 0 :(得分:4)

更新答案

您可以定位td[rowspan]以确保所有行窗口都获得背景色。请参阅更新的代码段。

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>

答案 1 :(得分:2)

最好是选择td代替tr并过滤td[rowspan]

无论如何,

背景col将永远留在tr / td / th后面。

示例:

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;