1

テーブルの大部分のルック アンド フィールをカスタマイズするために、「t_data」クラスを定義しています。

ただし、場合によっては、テーブルの特殊化を追加する必要があります。たとえば、「顧客」と「注文」のテーブルの外観を変えたいとします。

スタイルを継承するデフォルトの方法は、次のように、両方のクラスの css-definitions を同じブロックに記述することです。

table.t_data, table.t_data_order, table.t_data_customer
{
    background-color: #080;
}

その方法は、ある程度拡張するまではうまく機能します...あまりにも多くの異なる定義が得られるまで。

現在、私はすでに次のようなものを持っています：

table.t_data thead tr th, table.t_data thead tr td, table.t_data tbody tr th,     table.t_data tbody tr td, table.t_data tfoot tr th, table.t_data tfoot tr td,
table.t_group thead tr th, table.t_group thead tr td, table.t_group tbody tr th,     table.t_group tbody tr td, table.t_group tfoot tr th, table.t_group tfoot tr td
{
    border: #333 1px solid;
}

t_data_customer および/または t_data_order で異なるように t_data をカスタマイズするには、そのブロックを TRIPPLE する必要があります...そして、いくつかの要素を見逃すリスクが高くなります...また、さまざまな要素に対して 10 以上のそのようなブロックがあります (背景、フォントなど）

このようなものに対するcssまたは非cssソリューションはありますか?

どうもありがとうございました！

PS アイデアだけで解決策がない場合は、恥ずかしがらずに共有してください。どんな考えでも大歓迎です

4

3 に答える 3

1

テーブルとターゲットに新しい共通 CSS クラスを追加するのはどうですか

.common td
.common th {
}

クラスをテーブルに追加する前に、テーブルのデフォルトのスタイリングが十分でないことを確認する必要があります。

td {
    /* Sensible default for all table cells */
}

次のステップは、別のスタイルを持つテーブルに「共通」のクラス名を見つけることです。人気のあるフレームワークの twitter ブートストラップは、境界線のあるテーブルに「table-bordered」を使用しますが、セマンティックな共通分母を見つける方が良いと主張する人もいます。しかし、それはあなた次第です。

これはセマンティックかどうかの問題ではありませんが、Nicole Sullivan によるプレゼンテーションを見て以来、プレゼンテーションは見つかりませんが、そこからの引用を見つけることができます: http://css-tricks.com/semantic-class-names /

私が最近 CSS Summit で見た Nicole Sullivan のプレゼンテーションで、彼女はいくつかの大企業が CSS ファイルでまったく同じ色を文字通り何千回も宣言していると非難しました。

cssファイルに書いていることの意味を見つけようとしてきて、大きな共通点を目指しています。

于 2013-02-23T17:27:23.733 に答える
1

残念ながら、これを CSS で行うことはできません。幸いなことに、CSS プリコンパイラを使用してこれを行うことができます (例: LE​​SS & Sass )。より正確には、 Mixins (両方の言語でサポートされています) を使用できます。

ミックスインを使用すると、クラス名をそのプロパティの 1 つとして含めるだけで、クラスのすべてのプロパティを別のクラスに埋め込むことができます。変数と同じですが、クラス全体が対象です。以下の例に示すように、Mixin は関数のように動作し、引数を取ることもできます。

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

(LESS の例)。t_dataこれは、クラスでできることです。

于 2013-02-23T17:28:00.070 に答える
0

多くのクラスを定義する代わりに、ID とクラスを使用できます。

ID で主要な CSS を定義し、クラスで違いを定義します。

<table id="mainstyle" class="variation1"> ...
于 2013-02-23T17:30:35.730 に答える