tableに指定したpaddingが効かない原因はborder-collapse: collapse;

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

[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]

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

コメントを残す


You can add images to your comment by clicking here.