他のテーブルの効果スタイルではなく、1つのテーブルのみのパディングを変更しますか？

Question

私はいくつかのテーブルを持っていて、それらを別々にパディングしたいと思います。 ID 'mapTable'とテーブルの

が、それは働いていません（何も起こりません）：私は、次の試してみました。 'padding-bottom'ではなく、'margin-bottom'を試したときと同じ結果になります。

<td>テーブルの1つだけのパディングを変更することはできますか？私はカスタムの<td>スタイルを持っていますが、他のすべてのテーブルでは混乱したくありません。

<table id='mapTable'> 
     <tr><td>stuff</td><td>stuff</td></tr> 
     <tr><td>info</td><td>info</td></tr> 
</table> 

ありがとう：完全性については

は、ここにテーブルです！

Answer 1

tdsを間違って選択しています。 >はスペースを使用しないでください。

スペースは、前にリストされた要素の子である要素を検索します。

table#mapTable tr td{ 
 
    padding-left: 4px; 
 
    padding-bottom: 20px !important; 
 
}

<table id='mapTable'> 
 
     <tr><td>stuff</td><td>stuff</td></tr> 
 
     <tr><td>info</td><td>info</td></tr> 
 
</table> 
 
<table id='noStyle'> 
 
     <tr><td>stuff</td><td>stuff</td></tr> 
 
     <tr><td>info</td><td>info</td></tr> 
 
</table>

Answer 2

は、書き込むことは十分ですtable#mapTable tr td

を選択する必要はありません

#mapTable td { 
    padding-left: 4px; 
    padding-bottom: 20px !important; 
} 

（= "mapTable" ID内のすべての<td>要素）

Answer 3

あなたはすでに答え、ちょうどいくつかのより詳細な説明：

table > trは、これまでにテーブルの行と一致しません - テーブルの行はtableの子どもはないため。

これらは、tbody,theadまたはtfootという要素の子です。あなたのHTMLコードにそのような要素がないという事実はここでは関係ありません。そのような状況では、ブラウザはtbody要素を暗黙的にと作成します.DOMを作成するときにはにはがあります。

ブラウザのDOMインスペクタを使用して簡単に確認できます。上記の最小限の表の例でも、tbodyがあることがわかります。