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

質問

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

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

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

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

回答No.1

yambejp · ベストアンサー

こんな感じでやります

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

回答No.2

k_iwao

罫線の設定をせずに、罫線を表示させる方法もありますよ。
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>