• ベストアンサー

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

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

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.5

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

すると、全ての回答が全文表示されます。

その他の回答 (5)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.6

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

chessbeauty
質問者

お礼

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

すると、全ての回答が全文表示されます。
  • Shige29
  • ベストアンサー率23% (121/520)
回答No.4

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

chessbeauty
質問者

補足

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

すると、全ての回答が全文表示されます。
  • partita
  • ベストアンサー率29% (125/427)
回答No.3

#2です。 訂正 td.border {border-bottom-width:1px;border:solid #000;}

すると、全ての回答が全文表示されます。
  • partita
  • ベストアンサー率29% (125/427)
回答No.2

要するに、 ・数字に下線があるかないか ですよね。 【方法1】 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> 【方法2】 <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;}

chessbeauty
質問者

お礼

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

すると、全ての回答が全文表示されます。
  • Shige29
  • ベストアンサー率23% (121/520)
回答No.1

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

すると、全ての回答が全文表示されます。

専門家に質問してみよう