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

tableに指定した背景を少し広げようと思って
paddingを指定したけどうんともすんとも言わない

firebugで確認してもpaddingは指定されてるわ、でも実際には反映されてないわってのが確認できた
最小のソースで試してみたらそっちはちゃんとpadding効いた

さっぱり意味がわからず時間も無かったから
その時は背景色と同じ色のborderで誤魔化した（邪道）けど
落ち着いてよく考えてみたら
問題の起きてるファイルに読み込まれてて
最小の記述に読み込まれてないreset.css内の内容がほぼ犯人としか思えない

そこでtable周りのreset指定を見なおして、とてつもなく怪しい奴がいました

table{border-collapse: collapse;}

1	table{border-collapse: collapse;}

って事で次のように書き換えてみると

table{border-collapse: separate;}

1	table{border-collapse: separate;}

tableに指定したpaddingが反映されました

<!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>

<!DOCTYPE html>

<head>

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

</tr>

<tr>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

関連記事かもしれん:

コメント

コメントを残すコメントをキャンセル

最近の投稿

カテゴリー

関連記事かもしれん:

SNSでもご購読できます。

コメント

コメントを残す コメントをキャンセル

最近の投稿

よく見られているページ

カテゴリー

コメントを残すコメントをキャンセル