入れ子にしたテーブルの罫線について

質問

htmlとcssを学習し始めた者です。
下記のような表を作りましたが
罫線が2重になってしまいます。
この罫線をダブらないようにしたいのです。
一番左の列で言えば、外枠を残し、100の上、左、右
を消し、200の左右を消し、300の左、右、下を消し
一本の線で書かれた表にしたいと考えています。
ご教示くださるようお願いいたします。

<LINK href="style.css" type="text/css" rel="stylesheet">

<table>
<tr> <td>
<table>
<tr><td>100</td></tr>
<tr><td>200</td></tr>
<tr><td>300</td></tr>
</table>
</td>
<td>
<table>
<tr><td>101</td></tr>
<tr><td>201</td></tr>
<tr><td>301</td></tr>
<tr><td>401</td></tr>
<tr><td>501</td></tr>
</table>
</td>
<td>12345<br>67890
</td>
<td>
<table>
<tr><td>102</td></tr>
<tr><td>202</td></tr>
<tr><td>302</td></tr>
<tr><td>402</td></tr>
</table>
</td>
</tr>
</table>

style.css
table{ border-collapse: collapse; border: 1px solid #000000; line-height:130%; margin:auto; border-spacing:0; }
td{ border: 1px solid #000000; padding:5px;}

回答No.5

BLUEPIXY · ベストアンサー

<style>
table{ border-collapse: collapse; border: 1px solid #000000; line-height:130%; margin:auto; border-spacing:0; }
td{ border: 1px solid #000000; padding:5px;}
table.nest { border-style:none; }
td.top { border-style:none none solid none;}
td.middle{ border-style:none none solid none;}
td.bottom{ border-style:none;}
</style>
<table>
<tr> <td>
<table class="nest">
<tr><td class="top">100</td></tr>
<tr><td class="middle">200</td></tr>
<tr><td class="bottom">300</td></tr>
</table>
</td>
<td>
<table class="nest">
<tr><td class="top">101</td></tr>
<tr><td class="middle">201</td></tr>
<tr><td class="middle">301</td></tr>
<tr><td class="middle">401</td></tr>
<tr><td class="bottom">501</td></tr>
</table>
</td>
<td>12345<br>67890
</td>
<td>
<table class="nest">
<tr><td class="top">102</td></tr>
<tr><td class="middle">202</td></tr>
<tr><td class="middle">302</td></tr>
<tr><td class="bottom">402</td></tr>
</table>
</td>
</tr>
</table>

回答No.6

BLUEPIXY

#5です。
＞＃の部分の隙間をなくして
そういうことなら
td{ border: 1px solid #000000; padding:5px;}
を
td{ border: 1px solid #000000;}
にしましょうpaddingで幅があったらくっつくわけないです
ネストしないtdは、
td.nonest{ padding:5px;}
して
.top,.middle,.bottomの方でpadding:5px;します

お礼

ネストの部分とそうでない部分を区別しないといけないんですね。
スタイルシートだといっぺんにできると思ってました。
がんばって勉強します。
的確な指摘ありがとうございました。

回答No.4

Shige29

ああ、ボーダーが二重線になっているのを一本線にしたいのかと勘違いしてました；
┌──┐
│┌┐│
│├┤│
│├┤│
│└┘│
└──┘
↑こうしたいのかと…。

補足

┌──―┐
│######｜
｜#┌┐#│
│#├┤#│
│#├┤#│
│#└┘#│
｜######｜
└──―┘
＃の部分の隙間をなくして、＃の外側の罫線を
＃の中の罫線と一体化させたいのです。
表現が適切でなく申し訳ありません。

回答No.3

partita

#2です。

訂正

td.border {border-bottom-width:1px;border:solid #000;}

回答No.2

partita

要するに、
・数字に下線があるかないか
ですよね。

【方法１】
td.border {border-top-width:1px;border:solid #000;}

を100と200のtdに適用すればよいのでは？

<table>
<tr><td class="border">100</td></tr>
<tr><td class="border">200</td></tr>
<tr><td>300</td></tr>
</table>

【方法２】
<table border="1" bordercolor="#000000" frame="void">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>

table {border-collapse: collapse;}

お礼

早速の回答、ありがとうございます。
２の方法では見た目変わりませんでしたが、
１の方法でクラス？の適用の実例を
示して頂き、大変参考になりました。
本当にありがとうございました。

回答No.1

Shige29

先ずはプレビューしてみましょう。
確認してませんが、多分出来てると思いますよ。