スタイル最初<TD>次の行特定のクラス/ W

Question

Iは

• クラス「ヘッダ」でカラムを次、および
• はCOLSPAN設定されていないことをすべての行の最初のTDをスタイルする必要が

私はCSSだけではできないと思いますので、jQueryを使う必要があると思いますか？

<tr> 
    <td colspan="2" class="header">abc</td> 
</tr> 
<tr> 
    <td>sasdas</td> 
    <td>21234r</td> 
</tr> 

...のようなものですか？

$(".header").next("tr>td").css("width","20%"); 

Answer 1

classheaderが<td>上にあるので、あなたはその親<tr>を取得する必要があります。 次に<tr>を取得し、最初に<td>を見つけます。実際には醜いのですが、 のように、<th>を列ヘッダーに使用し、表のセルから区切ってスタイルを設定できます。

これを試してみてください：

$(".header").closest('tr').next("tr").find('td:first').not('[colspan]').css("width","20%"); 

Answer 2

:not()が有効なCSS3であり、:has()はjQueryの/シズルでのみ、残りはCSS2です。

$('tr:has(.header) + tr td:first-child:not([colspan])') 

Answer 3

ヘッダー行にはTHを使用することをおすすめします。よりクリーンで、意味的に妥当で、それで、すべてのことを世話するためにjQueryを使う必要はありません。

HTML：

<tr> 
    <th colspan="2">abc</th> 
</tr> 
<tr> 
    <td>sasdas</td> 
    <td>21234r</td> 
</tr> 

CSS：あなたはわずか20％の幅であることを1つの列を強制しようとしているように見える：ヘッダのみ、以下の行をスタイリングについて

td:first-child { 
width: 20%; } 

？したがって、最初の列ごとに適用されるCSSの使用には害はありません。 Support for first-childは、今日のブラウザの状況でかなり安定しています（IE8ではDOCTYPEが宣言されている必要がありますが、必要に応じて古いバージョンで利用可能です）。