2

<td >2番目と4番目の右側の境界線を付けたいだけです...

ご覧のとおり、次の表があります。

<table class="secondtd">
  <tr>
     <td> Name </td>
     <td> Class </td>
     <td> RollNo </td>
     <td> Batch </td>
   </tr>
</table>

私はcssでこのようなことを試しました

.secondtd  td+td {
  border-right:solid 1px red;
}

しかし、私にはうまくいきません..私はIEを使用しています。

4

6 に答える 6

4

テーブルの 2 番目と 4 番目の要素にクラス 2 を割り当てることができます。

 <td class="secondborder"> </td>

または、次を使用できますnth-child。

td:nth-child(2), td:nth-child(4) {
 border-right:thick double #ff0000;
}

http://jsfiddle.net/ekHQf/

2番目と4番目の要素を選択します。td が 4 つしかない場合は、次を使用できますeven。

td:nth-child(even) {
  border-right:thick double #ff0000;
}

http://jsfiddle.net/ekHQf/1/

編集：

クラスを適用してこれを行うためのコメントから：

.secondtd td:nth-child(2) {
  border-right:thick double #ff0000;
}
于 2013-02-20T10:01:05.007 に答える
3

3 つの基本的なオプションがあります。

1) セルにクラスを設定し、単純なクラス セレクターを使用します。退屈ですが、すべての CSS 対応ブラウザーで動作します。

2):first-child疑似クラスを兄弟演算子と一緒に使用し+ます。

.secondtd :first-child + td,
.secondtd :first-child + td + td + td {
  border-right: solid 1px red;
}

「標準モード」の IE 7 (ただし IE 6 を除く) を含む、最新のすべてのブラウザーで動作します。さほどぎこちないと思いますが、2列目と4列目じゃなくて42列目だったらぎこちないです。

3):nth-child(...)疑似クラスを使用します。

.secondtd td:nth-child(2),
.secondtd td:nth-child(4) {
  border-right: solid 1px red;
}

「標準モード」の IE 9 (以前のバージョンを除く) を含む最新のブラウザーで動作します。

この特殊なケースでは、より短いセレクター リストを使用できます。これは、ここでの列番号の範囲では、対応するのは 2 と 4 だけだからです2n(ここでnは、すべての非負の整数値 0、1、2、... が暗黙的に取得されます)。

.secondtd td:nth-child(2n) {
  border-right: solid 1px red;
}
于 2013-02-20T10:22:51.867 に答える
1

クラス要素を表示したい場所、つまりタグにのみ適用してみてください。

<table>

 <tr>
   <td> Name </td>
   <td class="secondborder"> Class </td>
   <td> RollNo </td>
   <td class="secondborder"> Batch </td>
  </tr>
 </table>
于 2013-02-20T09:58:37.763 に答える
0

css を使用してこれを行うことができますnth-child：

td:nth-child(even) {
    border-right: 1px solid red;
}

これにより、2 つおきの要素が選択されます

于 2013-02-20T10:02:01.843 に答える
0

nth-child セレクターを:nth-child(even)またはで使用:nth-child(2n)して、他のすべての td に追加できます。古いブラウザをサポートする必要がある場合は、jQuery を使用して のクラスをeventd に追加し、それを css に追加できます。

CSS

.secondtd td.even,
.secondtd td:nth-child(even) {
    border-right: 1px solid red;
}

js

// jQuery fallback
$('.secondtd td:nth-child(even)').addClass('even');

http://jsfiddle.net/ferne97/gsU4K/

于 2013-02-20T10:14:42.040 に答える
0

css セレクターを使用nth-childして、対応する td スタイルを設定します。

td:nth-child(2) ,td:nth-child(4)
{
    border-right:solid 1px red;
}

フィドル

于 2013-02-20T10:05:02.590 に答える