Как использовать nth-child для оформления таблицы с помощью rowspan?

У меня есть таблица, которая имеет одну строку, которая использует rowspan. Так,

<code><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>
</code>

Я хотел бы использовать псевдокласс nth-child, чтобы добавить цвет фона ко всем другим строкам, но в строках строк это не так; он добавляет цвет фона к строке под строкой с интервалом строки, когда на самом деле мне бы хотелось пропустить эту строку и перейти к следующей.

Есть ли способ заставить nth-child сделать что-то умное или использовать [rowspan] в селекторе, чтобы обойти это? Таким образом, в этом случае мне бы хотелось, чтобы цвет фона был в строках 1 и 4, а затем в 6, 8, 10 и т. Д. (Поскольку ни один из них не имеет пробелов)? Это похоже на то, что если я вижу диапазон строк, то я хочу, чтобы nth-child добавил 1 к n, а затем продолжил.

Вероятно, нет решения этой проблемы, но я подумал :-)

Ответы на вопрос(6)

Вы можете сделать это, используя только 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>

У меня была похожая проблема, и я просто переопределил фон строки с фонами на TD внутри них. В зависимости от желаемого результата, это может сработать и для вас?

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

Конечно, вы можете переопределить другие строки, такие как заголовки и т. Д., С помощью класса или th.

Я использовал комбинацию предыдущего ответа, чтобы добавитьtrсdisplay=none программно:

HTML

  <table>
  <tr>
    <td>A</td>
    <td>B</td> 
    <td>C</td>
  </tr>
  <tr>
    <td rowspan=2>1</td>
    <td rowspan=2>2</td>
     <td>sub C 1</td>
  </tr>
  <tr>
    <td>sub C 2</td> 
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

CSS

table tr:nth-child(2n) {
  background-color: #F8ECE0;
}

Jquery

$( "<tr style='display:none'></tr>" ).insertAfter('tbody tr:has(td[rowspan])');

УвидетьJSfiddle.

Попробуйте разделить таблицу по 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>
    
  

Решение Вопроса

К сожалению, нет способа сделать это с:nth-child() в одиночку или с помощью только CSS селекторов в этом отношении. Это связано с природой:nth-child() который выбирает чисто на основе элемента, являющегося n-ным потомком своего родителя, а также сОтсутствие родительского селектора в CSS (Вы не можете выбратьtr только если он не содержитtd[rowspan], например).

JQuery имеет:has() однако, селектор, которого нет в CSS, который вы можете использовать вместе с:even (не:odd как он 0 индексирован по сравнению с:nth-child()'s 1-index) для фильтрации в качестве альтернативы CSS:

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

Предварительный просмотр jsFiddle

 Elisabeth18 апр. 2012 г., 03:16
Спасибо, я так и понял. Цените идеи!

Что, кажется, работает для меня, это поставить тд в строке ниже с отображением: нет

<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>
 25 июл. 2018 г., 02:33
это должен быть принятый ответ
 26 февр. 2014 г., 22:56
На самом деле это хорошее решение / работает хорошо.
 25 нояб. 2015 г., 12:56
Это довольно гениальный обходной путь! +1 :)

Ваш ответ на вопрос