テーブルを操作する場合、1つのクラスに対して2つのセレクタを使用できますか？

Question

コンテキスト：私はHTML/CSSの初心者で、Markdownを使用して基本的なWebサイトを構築しています。

私はStackOverflowで投稿を調べましたが、特定の質問に答えられませんでした。

私は基本的なテーブルを持っている：

.mytable { 
border: 1px solid #ccc; 
background-color: white; 

th { 
padding: 2px; 
height:40px; 
color: #ffffff; 
background-color: #4c4c4c; 
} 

td { 
    padding: 2px; 
    text-align:center; 
    vertical-align:middle; 
    border:1px solid #f1eaf2; 
} 

tr:nth-child(odd){background-color: #efefef} 
} 

しかし、一つのテーブルの上に私が右にテキストを整列します。インラインスタイルを試しました。つまり、<td align="right" important!>が動作しませんでした。したがって、同じ<table>クラスに2つの異なる<td>を持つことが可能かどうかは疑問です。

そうでなければ、私は2つの異なるテーブルクラスを作成するStackOverflowで見つけました。

ありがとうございました。

Answer 1

はい、同じ表内の2つの列に異なるテキストを並べることができます。トリックは、を2番目の<td>要素に適用することです。これを行うにはいくつかの方法がありますが、下の例ではtd:last-childセレクタを使用しました。

.mytable { 
 
    border: 1px solid #ccc; 
 
    background-color: white; 
 
} 
 
.mytable th { 
 
    padding: 2px; 
 
    height: 40px; 
 
    color: #ffffff; 
 
    background-color: #4c4c4c; 
 
} 
 
.mytable td { 
 
    padding: 2px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 100px; 
 
    border: 1px solid #f1eaf2; 
 
} 
 
.mytable td:last-child { 
 
    text-align: right; 
 
} 
 
.mytable tr:nth-child(odd) { 
 
    background-color: #efefef 
 
}

<table class="mytable"> 
 
    <tr> 
 
    <th>A</th> 
 
    <th>B</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1A</td> 
 
    <td>1B</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2A</td> 
 
    <td>2B</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3A</td> 
 
    <td>3B</td> 
 
    </tr> 
 
</table>