CSSと表のフォントの色

Question

私はファンタジーのニュースレターテンプレートを作っています。次の表は、内容が "Reservationnumber"と "23425-FF3234"の2 <th>で構成されています。私はこれらのうち約60を持っています<th>。私はフォントに色をつけたいと思います。各<strong>タグと<th>タグにクラスclass="reservation__fontcolor"を設定すると、私はその作業を行うことができます。しかし、それを<th>タグを囲むテーブルにセットすると、うまくいきません。

class="reservation__fontcolor"をグローバルレベルに設定する方法はありますか？クラスタグを60回コピー/ペーストする必要はありませんか？

次のコードでは、タグを両方含む<th>タグに<th class="small-6 large-6 columns first reservation__fontcolor">を設定しようとしました。しかし、それは動作していません。どうして？

CSS

.reservation__fontcolor { 
     color: red; 
     } 

あなたがあなたのテーブルにクラスreservation__fontcolorを追加して、あなたのCSSでこれを追加することができます

<table align="center" class="wrapper header float-center bgcolor"> 
    <tbody> 
    <tr> 
     <td class="wrapper-inner"> 
     <table align="center" class="container" style="background-color:transparent"> 
      <tbody> 
      <tr> 
       <td> 
       <!-- Reservationnumber --> 
       <table class="row collapse"> 
        <tbody> 
        <tr> 
         <th class="small-6 large-6 columns first reservation__fontcolor"> 
         <table> 
          <tbody> 
          <tr> 
           <th> 
           <strong>Reservationnumber:</strong> 
           </th> 
          </tr> 
          </tbody> 
         </table> 
         </th> 
         <th class="small-6 large-6 columns last"> 
         <table> 
          <tbody> 
          <tr> 
           <th> 
           23425-FF3234 
           </th> 
           <th class="expander"></th> 
          </tr> 
          </tbody> 
         </table> 
         </th> 
        </tr> 
        </tbody> 
       </table>        
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

HTML：それはようなものだ

.reservation__fontcolor tr th{ 
    color: red; 
} 

パス、次のように読むことができます：class _fontcolorクラスの要素内のtrタグ内のすべてのthタグは、定義されたプロパティを取得します。

これは、と、たとえば起こる性質を得ることから、そのクラスからテーブルの外に、他の第タグを防止：

th{ 
    color: red; 
} 

あなただけ同じプロパティを取得するには、両方の目とTDタグを望んでいた場合クラステーブル内で、あなたができるとき：

.reservation__fontcolor tr th, .reservation__fontcolor tr td{ 
    color: red; 
} 

を私はこれらの概念の違いは、それが動作し、さまざまな状況でそれを適用する方法を理解するために重要だと思います。

幸運。

Answer 2

1つのテーブルを使用することができ、タグで色を付けることができます。私は作成しましたenter code herefiddle

Answer 3

あなたはNested CSS selectorで作業する必要があります。

以下の例では、考えを理解するために最小限の範囲で作業していますが、最初にtableで開始して、thに届きます。

CSS：

<style> 
    table.reservation__fontcolor th{ 
     color red; 
    } 
</style> 

HTML：質問自体にそれを再現するために必要な最短のコードが含まれている必要があり、コードの助けを求める

<table class="row collapse reservation__fontcolor"> 
    <tbody> 
     <tr> 
     <th class="small-6 large-6 columns first "> 
      <table class="reservation__fontcolor"> 
       <tbody class=""> 
        <tr> 
         <th> 
          <strong>Reservationnumber:</strong> 
         </th> 
        </tr> 
       </tbody> 
      </table> 
     </th> 
     <th class="small-6 large-6 columns last"> 
      <table> 
       <tbody class="reservation__fontcolor"> 
        <tr> 
         <th> 
          23425-FF3234 
         </th> 
         <th class="expander"></th> 
        </tr> 
       </tbody> 
      </table> 
     </th> 
    </tr> 
    </tbody> 
</table>