33

rowspan を使用する行が 1 つあるテーブルがあります。そう、

<table>
 <tr>
  <td>...</td><td>...</td><td>...</td>
 </tr>
 <tr>
  <td rowspan="2">...</td><td>...</td><td>...</td>
 </tr>
 <tr>
              <td>...</td><td>...</td>
 </tr>
 <tr>
  <td>...</td><td>...</td><td>...</td>
 </tr>
</table>

nth-child 疑似クラスを使用して背景色を 1 行おきに追加したいのですが、rowspan が台無しになっています。実際には、その行をスキップして次の行に移動したいときに、行の下の行に背景色を追加します。

nth-child にスマートなことをさせる方法、またはセレクターで [rowspan] を使用してこれを回避する方法はありますか? したがって、この場合、背景色を行 1 と 4 に配置したいのですが、その後は 6、8、10 などに配置します (行スパンがないため)。行スパンが表示された場合、nth-child で n に 1 を追加して続行するようにします。

おそらくこれに対する解決策はありませんが、私が尋ねると思いました:-)

4

7 に答える 7

44

私にとってうまくいくように見えるのは、下の行に td を display:none で配置することです

<table>
   <tr>
      <td rowspan="2">2 rows</td>
      <td>1 row</td>
   </tr>
   <tr>
      <td style="display:none"></td>
      <td>1 row</td>
   </tr>
</table>
于 2013-10-25T12:56:09.517 に答える
18

:nth-child()残念ながら、これを単独で行う方法や、CSS セレクターを単独で使用する方法はありません。:nth-child()これは、要素がその親の n 番目の子であることに純粋に基づいて選択するという性質と、 CSS に親セレクターtrがないことと関係があります ( a が含まれていない場合にのみatd[rowspan]を選択することはできません。例）。

ただし、 jQuery には:has()、CSS にはないセレクターがあり、CSSの代替としてフィルタリングするために( 0 インデックスと 1 インデックスで:evenはなく) 組み合わせて使用​​できます。:odd:nth-child()

$('tr:not(:has(td[rowspan])):even')

jsFiddle プレビュー

于 2012-04-18T00:21:53.553 に答える
5

同様の問題があり、行の背景を TD の内側の背景で上書きしました。あなたの望む結果に応じて、これはあなたのために働くかもしれません?

tr:nth-child(odd) {
    background: #DDE;
}
tr:nth-child(odd) td[rowspan] {
    background: #FFF;
}

もちろん、ヘッダーなどの他の行をクラスまたは th でオーバーライドできます。

于 2013-03-06T23:52:24.670 に答える
3

次のように、テーブルを tbody で区切ってみてください。

tbody tr:nth-child(odd){
  background: #00FFFF;
}
tbody tr:nth-child(even){
  background: #FF0000;
}

tbody:nth-child(odd)  td[rowspan]{
  background: #00FFFF;
}
tbody:nth-child(even)  td[rowspan]{
  background: #FF0000;
}  
<table>
<tbody>
<tr>
	<td rowspan="4">...</td>
	<td>...</td>
	<td>...</td>
	<td rowspan="4">...</td>
	<td>...</td>
</tr>
<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>
<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>
<tr>
	<td>...</td>
	<td>...</td>
    <td>...</td>
</tr>
</tbody>
<tbody>    
<tr>
	<td rowspan="3">...</td>
	<td>...</td>
	<td>...</td>
	<td rowspan="3">...</td>
	<td>...</td>
</tr>
<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>
<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>
</tbody>
</table>

于 2014-12-20T10:25:12.187 に答える
2

追加のマークアップを追加する場合は、CSS のみを使用してこれを行うことができます。行のすべての「グループ」を<tbody>タグでラップします。次に、奇数ごとに背景色を追加しますtbody。

tbody:nth-child(odd) {
  background-color: yellow;
}
<table>
  <tbody>
    <tr>
      <td>tr 1</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">tr 2+3</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>tr 4</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>tr 5</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>tr 6</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>tr 7</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>tr 8</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>tr 9</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>tr 10</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

于 2016-08-25T11:37:40.180 に答える
0

例のように最初の列だけでrowspanを使用している場合は、 nth-last-child(even) を使用して問題を解決することもできます

于 2021-05-06T12:21:10.310 に答える