tableに指定した背景を少し広げようと思って
paddingを指定したけどうんともすんとも言わない
firebugで確認してもpaddingは指定されてるわ、でも実際には反映されてないわってのが確認できた
最小のソースで試してみたらそっちはちゃんとpadding効いた
さっぱり意味がわからず時間も無かったから
その時は背景色と同じ色のborderで誤魔化した（邪道）けど
落ち着いてよく考えてみたら
問題の起きてるファイルに読み込まれてて
最小の記述に読み込まれてないreset.css内の内容がほぼ犯人としか思えない
そこでtable周りのreset指定を見なおして、とてつもなく怪しい奴がいました
[html]table{border-collapse: collapse;}[/html]
って事で次のように書き換えてみると
[html]table{border-collapse: separate;}[/html]
tableに指定したpaddingが反映されました
![[image]tableにmargin](http://blog.sakurachiro.com/wp-content/uploads/2013/04/2013-04-25_01.png)
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
padding: 3em;
font-family: sans-serif;
}
table{
width:300px;
margin: 0 auto;
background: #f33;
padding: 2em;
border: 1px solid #000;
border-collapse: collapse;
margin-bottom: 20px;
}
th,td{
background: #fff;
border: 1px solid #000;padding: .5em;
}
.separate{
border-collapse: separate;
}
</style>
</head>
<body>
<table>
<tr>
<td>th th</td>
<td>td td</td>
</tr>
<tr>
<td>th th</td>
<td>td td</td>
</tr>
</table>
<table class="separate">
<tr>
<td>th th</td>
<td>td td</td>
</tr>
<tr>
<td>th th</td>
<td>td td</td>
</tr>
</table>
</body>
</html>[/html]
コメント