電子書籍の厳選無料作品が豊富!

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

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

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

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

A 回答 (2件)

こんな感じでやります



<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>
    • good
    • 0

罫線の設定をせずに、罫線を表示させる方法もありますよ。


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>
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!