2017-11-04 2 views
2

テーブルに余白を追加しようとしています。パディングとボーダーワークがありますが、マージンはありません。セル間隔と同様にHTMLマージンが機能していません

th { 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
    padding: 10px; 
 
}
<table id="Expon"> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
</table>

+0

おそらく関連:https://stackoverflow.com/questions/6987102/applying-margin-to-th-elements – Nisarg

+0

それはですので、上記のコードサンプルでjsfiddleのリンクを追加することを検討してください他の人があなたの質問に対する解決策を試すのが簡単です。 –

+1

TH/TDに余裕を持たせることはできません。 – panther

答えて

1

あなたはマージンを追加したい場合は、ここでは、テーブルCELLSPACING =「10」 を追加する必要があり、このコードを試し、テストするために私のコードです...

<html> 
<head> 

<style> 
    th { 
     border: 1px solid black;   
     padding: 10px; 
    } 
</style> 
</head> 
<body> 
<table id="Expon" cellspacing="10"> 
    <tr> 
    <th>gfhd</th> 
    <th>dfgh</th> 
    <th>gfh</th> 
    </tr> 
    <tr> 
    <th>gfh</th> 
    <th>fgh</th> 
    <th>gfh</th> 
    </tr> 
    <tr> 
    <th>fgdh</th> 
    <th>gfh</th> 
    <th>fgh</th> 
    </tr> 
</table> 
</body> 
</html> 
+0

doctype宣言は本当に貧弱な例を設定しません。 –

+0

@bhansa何も学ばない限り、あなたは再びコメントする必要はありません。 –

0

、CSSであなたはborder-collapse: separateプロパティと一緒にborder-spacingを使用することができ、親tableタグ

table { 
 
    border-spacing: 10px; 
 
    border-collapse: separate; 
 
} 
 
th { 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
    padding: 10px; 
 
}
<table id="Expon"> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
</table>

0

しようとする適用〜へ

margin-top: 10px; 
margin-bottom: 10px; 
margin-right: 10px; 
margin-left: 10px; 

余白の両側を定義する必要があります。あなたは、このリンクを参照し、余白とのより多くの助けが必要な場合 は: https://www.w3schools.com/css/css_margin.asp

0

マージンを使用する代わりに、border-spacingを使用してセル間を区切ります。

th{ 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
table{ 
 
    border-spacing: 10px; 
 
}
<table id="Expon"> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
</table>

関連する問題