6

css または jquery を使用して、テーブルの最初の行にのみボーダートップを追加するにはどうすればよいですか?

以下のコードを使用してすべての td で境界線を取得していますが、一番上の最初の行にも境界線が必要です。

このプロジェクトでは CSS3 を使用できません。

私が持っているもの:

コンテンツ

コンテンツ

コンテンツ

私が欲しいもの:

コンテンツ

コンテンツ

コンテンツ

.MyCarTable td {
    border-bottom: 1px solid grey;
}
4

3 に答える 3

13

この場合、パフォーマンス上の理由から CSS のみが推奨される方法です。他の方法では実行できないため、実際に必要な場合を除き、javascript を使用しないでください。

解決策 1:first-child疑似クラスを使用する

スタイル定義を追加します。

.MyCarTable td {
    border-bottom: 1px solid #ccc;
}
    .MyCarTable tr:first-child td {
        border-top: 1px solid grey;
    }

そして、心配しないでください。この特定の疑似クラスは、ブラウザーで長い間サポートされてきました。IE でもバージョン 7 以降でサポートされています。この動作を示すJSFiddleを次に示します。

th解決策 2:要素を使用したテーブル ヘッダー

テーブルにヘッダー行がある場合は、thその代わりに要素を使用tdし、ヘッダー セルに別のスタイルを設定します。ただし、これは、最初の行のセルのセマンティック コンテンツが、実際にはその下の行のセル ヘッダーの説明である場合にのみ使用してください。そうでなければ、私はそれを提案しません。

連続したテーブルの問題

同じコンテナ内に連続するテーブルがある場合、次のテーブルは前のテーブルの最後の行から上部の境界線を取得します。また、境界線が重複するため、最初の行に上部境界線を適用したくありません。

解決策 (この JSFiddleに見られるように) は似ており、最初のテーブルのみに適用されます。

.MyCarTable td {
    border-bottom: 1px solid #ccc;
}
    .MyCarTable:first-child tr:first-child td {
        border-top: 1px solid #f99;
    }​

ご覧のとおり、一番上の行の境界線は、最初のテーブルとその中の最初の行にのみ設定されています。連続するすべてのテーブルがそれを設定するわけではありません。もちろん、この例は上記の最初のソリューションとのみ互換性があります。要素を含むパスを選択した場合はth、両方の組み合わせを使用する必要があります (thおよび疑似クラス)。

しかし、あなたが言ったように、リピーターコードを統合しました。

于 2012-11-06T11:23:25.617 に答える
0

これを試して：

.MyCarTable tr{border-top: 1px solid grey;}
.MyCarTable tr + tr {border-top: none !important;}

または

.MyCarTable tr td {border-top: 1px solid grey;}
.MyCarTable tr + tr td {border-top: none !important;}

「+」は CSS の隣接セレクターです。隣接セレクターは、IE7+ およびその他すべての最新ブラウザーでサポートされています。

于 2012-11-06T11:36:26.750 に答える
0 
$(".MyCarTable tr:first").css({
    borderTop: "1px solid grey"
});
于 2012-11-06T11:24:13.913 に答える