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

<p>у меня есть таблица, которая имеет одну строку, которая использует rowspan. так,</p><pre><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></pre><p>я хотел бы использовать псевдокласс nth-child, чтобы добавить цвет фона ко всем другим строкам, но в строках с ним все портится; он добавляет цвет фона к строке под строкой с интервалом строки, когда на самом деле я бы хотел, чтобы он пропустил эту строку и перешел к следующей. </p><p>есть ли способ заставить nth-child сделать что-то умное или использовать [rowspan] в селекторе, чтобы обойти это? так что в этом случае я бы хотел, чтобы цвет фона был в строках 1 и 4, а затем в 6, 8, 10 и т.д. (поскольку ни один из них не имеет пробелов)? это похоже на то, что если я вижу строку, то я хочу, чтобы nth-child добавил 1 к n, а затем продолжил. </p><p>наверное, нет решения этой проблемы, но подумал, что я спрошу :-)</p>

<p>к сожалению, нет способа сделать это только с помощью <code>:nth-child()</code> или с помощью только css-селекторов. это связано с природой <code>:nth-child()</code>, которая выбирает исключительно на основе элемента, являющегося n-ным потомком своего родителя, а также с <a href="https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector">отсутствием родительского селектора в css</a> (вы не можете выбрать <code>tr</code>, только если он не не содержит <code>td[rowspan]</code>, например).</p><hr><p>в jquery есть селектор <code>:has()</code>, которого нет в css, однако его можно использовать вместе с <code>:even</code> (не <code>:odd</code>, так как он 0-индексирован, а с 1-индексом <code>:nth-child()</code>) для фильтрации в качестве альтернативы css:</p><pre><code>$('tr:not(:has(td[rowspan])):even')  <a href="http://jsfiddle.net/boltclock/efp7f">предварительный просмотр jsfiddle 

то, что, кажется, работает для меня, состоит в том, чтобы поместить td в строку ниже с показом: ни один<table>  <td rowspan="2">2 rows 1 row   <td style="display:none"> 1 row  </table> 

у меня была похожая проблема, и я просто переопределил фон строки с фонами на td внутри них. в зависимости от желаемого результата, это может сработать и для вас?tr:nth-child(odd) { background: #dde; } tr:nth-child(odd) td[rowspan] { background: #fff; } конечно, вы можете переопределить другие строки, такие как заголовки и т.д. с помощью класса или th.

попробуйте разделить таблицу по tbody, что-то вроде:<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override">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; }  <pre class="snippet-code-html lang-html prettyprint-override"><table> <tbody>  <td rowspan="4">... ... ... <td rowspan="4">... ...   ... ... ...   ... ... ...   ... ... ...  </tbody> <tbody>  <td rowspan="3">... ... ... <td rowspan="3">... ...   ... ... ...   ... ... ...  </tbody> </table>    

я использовал комбинацию предыдущего ответа, чтобы программно добавить tr с display=none:html <table>  a b c   <td rowspan=2>1 <td rowspan=2>2 sub c 1   sub c 2   3 4 5   6 7 8  </table> csstable tr:nth-child(2n) { background-color: #f8ece0; } jquery$( "<tr style='display:none'></tr>" ).insertafter('tbody tr:has(td[rowspan])'); </code></pre><p>смотрите <a href="http://jsfiddle.net/efp7f/154/">jsfiddle</a> .</p>

<p>вы можете сделать это, используя только css, если хотите добавить дополнительную разметку. оберните каждую «группу» строк в тег <code><tbody></code>. затем добавьте цвет фона для каждого нечетного <code>tbody</code>.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>tbody:nth-child(odd) { background-color: yellow; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>