5

HTMLページに多くのテーブルがあり、そのうちのいくつかはtr & td他のものだけを使用しています: thead, tbody, tfoot, tr, th & td.

いくつかの問題があるため、CSS ルールを使用してテーブルの上端と左端の境界線を作成してtdおり、それぞれに独自の右端と下端の境界線があります。

この特定のことは、td4 つの角すべてに を取得し、特定の角を丸める必要があるためです。

テーブルの最初の行のみを選択できる単一のルールを作成するにはどうすればよいですか?

私はこれまでこのルールを使用しています：

table.unit tr:first-child td:first-child, table.units thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
}
table.unit tr:first-child td:last-child, table.units thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

このjsfiddleでは、私の問題を見ることができます:( http://jsfiddle.net/NicosKaralis/DamGK/ )

  • 2 つの実装を同時に解決する方法はありますか?
  • ある場合、どうすればできますか？
  • そうでない場合は、最善の方法を見つけるのを手伝ってもらえますか?

PS: テーブルの要素を変更することはできますが、サード パーティのライブラリでさらに多くのリファクタリングが必要になるため、変更したくありません。

4

3 に答える 3

3

具体的すぎたと思います

更新：元の回答には、子セレクター要素が孫などに伝播しないようにするための直接の子セレクターがありませんでした。

このフィドルはあなたが望むものを示していると思います。構成に関係なく、このコードを使用してテーブル要素のコーナーを選択するだけです。

/* This works for everything */
.unit > :first-child > :first-child > :first-child, /* Top left */
.unit > :first-child > :first-child > :last-child,  /* Top right */
.unit > :last-child > :last-child > :first-child,  /* Bottom left */
.unit > :last-child > :last-child > :last-child    /* Bottom right */
{
    background: red;
}

もちろん、クラスが a 以外の他の要素に配置されている場合は、選択をいくらか狭めるために使用できtable.unitますが、重要なのは、子セレクターをあいまいにすることです。.unittable

于 2013-04-11T15:52:56.867 に答える
0

あなたはこのようなtheadの状況に対処することができます：

tr td:first-child, tr th:first child {some styles}
thead + tbody tr td:first-child {revert the above styles}

ただし、tfootで同じ状況をどのように処理するかはわかりません。スクリプトを使用する必要がある場合があります。

于 2013-03-20T14:01:43.987 に答える