web-dev-qa-db-ja.com

cssを使用してテーブルの最後のtdをスタイル設定する

特定のTDでCSSクラスを使用せずに、テーブルの最後のTDのスタイルを設定します。

<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

table td 
{ 
  border: 1px solid black;
}

テキスト「Five」を含むTDに境界線を付けないようにしたいのですが、クラスを使用したくありません。

htmlcsshtml-table
59
vchoke

相対ルールを使用できます：

table td + td + td + td + td {
  border: none;
}

これは、実行時に列数が決定されていない場合にのみ機能します。

37
sblundy

:last-childセレクターはそれを行うべきですが、それは IEのどのバージョンでもサポートされていません です。

クラスを使う以外に選択肢がないのではないかと心配しています。

81
yoavf

:last-of-type疑似クラスを使用できます。

tr > td:last-of-type {
    /* styling here */
}

さまざまなブラウザとの詳細および互換性については、 MDN を参照してください。
詳細については、 W3C CSSガイドライン をご覧ください。

30
series0ne

最後の子擬似クラスを使用できます

table tr td:last-child {
    border: none;
}

これは最後のtdのみをスタイルします。まだ完全にはサポートされていないため、不適切な場合があります

19
Neil Aitken

すでにJavaScriptを使用している場合は、jQueryをご覧ください。ブラウザに依存しない「最後の子」セレクターをサポートしており、このようなことができます。

$("td:last-child").css({border:"none"})
16
joshperry

で試してください：

tr:last-child td:last-child{
    border:none;
    /*any other style*/
}

これは、テーブル内の最後のtd要素にのみ影響します。唯一のものであると仮定します（そうでない場合は、テーブルを識別する必要があります）。ただし、非常に一般的であり、テーブルにさらにコンテンツを追加すると、最後のTDに適応します。

td:nth-child(5){
    border:none;
}

十分なはずです。

10
Kurt Poehler

Javascriptは、このクライアント側を実行するための唯一の実行可能な方法です（つまり、CSSは役に立ちません）。 jQueryの場合：

$("table td:last").css("border", "none");
3
nickf

JQueryでは、次の実行前にテーブルが静的または動的に作成される場合：

$("table tr td:not(:last-child)").css({ "border-right":"1px solid #aaaaaa" });

最後のセルを除くテーブル行のすべてのセルに右境界線を追加するだけです。

2
Jim R.

HTML 4.0で指定されているcol要素を使用できます（ link ）。すべてのブラウザで動作します。 ID、クラス、またはインラインスタイルを指定できます。唯一の注意点は、すべての行の列全体に影響することです。例：

<table>
    <col />
    <col width="50" />
    <col id="anId" />
    <col class="whatever" />
    <col style="border:1px solid #000;" />
    <tbody>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
    </tbody>
</table>
2
Darko Z

私もこれを行う方法を探していましたが、これが他の人に役立つ可能性があることがわかりました：

#table td:last-of-type { border: none; }

IEでもサポートされていないことに注意してください。

1
rachel

質問への直接的な答えではありませんが、<tfoot>を使用すると、必要なものを達成するのに役立つ可能性があり、もちろんtfootをスタイルできます。

1
Kevin Le - Khnle

IEの場合、CSS式の使用方法は次のとおりです。

<style type="text/css">
table td { 
  h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>
1
Liggy

別のアプローチもあります。これは、静的ではないテーブルで機能します。基本的には<th> の代わりに <td>その列の場合：

<style type="text/css">
 table td { border: 1px solid black; }
 table th { border: 0px; }
<style>
<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <th>Five</th>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <th>Five</th>
    </tr>
  </tbody>
</table>
0
Mottie

これは、すべてのノードの境界線を追加し、最後のノード（TD）の境界線を削除するコードです。

<style type="text/css">
    body {  
        font-family:arial;font-size: 8pt;  
    }  
    table td{
        border-right: #666 1px solid
    }  

    table td {  
        h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : 'border-right:  0px solid' ) );  
    }  
</style>
<table>
    <tr>
        <td>Home</td>
        <td>sunil</td>
        <td>Kumar</td>
        <td>Rayadurg</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

楽しい ...

私は画像を使用してそれを望んでいたボーダーの代わりに同じものが欲しい... :-)

0
sunilr