71

特定の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に境界線を付けないようにしたいのですが、やはりクラスを使用したくありません。

4

15 に答える 15

91

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

クラスを使うしかないのではないかと思います。

于 2008-12-11T16:02:34.190 に答える
43

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

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

さまざまなブラウザとの詳細と互換性については、MDNを参照してください。詳細については、 W3CCSSガイドライン
を 確認してください。

于 2012-05-09T15:04:34.870 に答える
39

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

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

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

于 2008-12-11T16:00:07.283 に答える
27

あなたは最後の子の疑似クラスを使うことができます

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

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

于 2008-12-11T16:05:52.623 に答える
16

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

$("td:last-child").css({border:"none"})
于 2008-12-11T16:06:57.550 に答える
4

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

$("table td:last").css("border", "none");
于 2008-12-11T16:04:49.897 に答える
3

HTML 4.0 ( link ) で指定されているように、 col 要素を使用できます。すべてのブラウザで動作します。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>
于 2008-12-11T21:41:18.843 に答える
2

jQuery では、以下が実行される前にテーブルが静的または動的に作成されている場合:

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

最後のセルを除く、表の行のすべてのセルに右罫線を追加するだけです。

于 2009-09-03T15:03:18.140 に答える
1

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

于 2008-12-11T16:06:23.683 に答える
1

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

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

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

于 2011-10-27T17:05:26.893 に答える
1

IEの場合、CSS式を使用するのはどうですか。

<style type="text/css">
table td { 
  h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>
于 2008-12-11T16:16:00.683 に答える
0

別のアプローチもあります..これは静的ではないテーブルで機能します...基本的にその列<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>
于 2009-09-26T06:58:34.683 に答える
0

これは、すべてのノードに境界線を追加し、最後のノード (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>

楽しみ ...

画像を使用して欲しかった境界線の代わりに同じものが欲しい... :-)

于 2009-08-29T10:37:35.010 に答える