こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

テーブルの枠線(外内両方)をすべて同じ太さ(1px)にしたい

はじめまして。
cssから初めて、いま初めてテーブルタグを触っているのですが・・・

おそらくとても初心者なことだと思うのですが、tableタグの枠線の太さを揃える方法がわかりません・・・
<table ~>で直接HTMLで指定すると重なり合う2つのborderのおかげで2px分のテーブルが表示されます。

これを1px分だけの細い(ここのサイトもそうだと思います。)テーブルを作りたいのですが、こちらはCSSでそれぞれのセルに対してこのセルはbottomだけ、このセルはleftだけ、というように指定していかなければいけないのでしょうか?
テーブル自体ほとんど触ったことはないのですが、なぜか余計にややこしいことをしているような気がして質問させていただきました。

どうかよろしくお願致します。

投稿日時 - 2008-04-03 22:29:14

QNo.3919970

すぐに回答ほしいです

質問者が選んだベストアンサー

こんな感じでやります

<style>
.border1px{
border-collapse:collapse;
}
.border1px td{
border:1px solid #000000;
}

</style>

<table class="border1px">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>

投稿日時 - 2008-04-03 22:35:04

ANo.1

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

罫線の設定をせずに、罫線を表示させる方法もありますよ。
cellspacingの数字を増やすと罫線が太くなります。

<style type="text/css">
table {
background-color:#646464;
}
th {
font-weight:bold;
background-color:#cacaca;
padding:5px;
}

td {
background-color:#ffffff;
padding:5px;
}
</style>

<table border="0" cellspacing="1" cellpadding="0" summary="ダミーテキスト"><tr>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<th>A</th>
<td>ダミーテキスト</td>
<td>ダミーテキスト</td>
<td>ダミーテキスト</td>
</tr>
<tr>
<th>B</th>
<td>ダミーテキスト</td>
<td>ダミーテキスト</td>
<td>ダミーテキスト</td>
</tr>
</table>

投稿日時 - 2008-04-04 13:35:41

あなたにオススメの質問