- ベストアンサー
html tableのボーダーを二重にする問題と解決方法
- テーブルタグを使用して線を表示させる際に、一部の要素が二重のボーダーになってしまう問題が発生します。この問題を解決するためには、CSSでborder-collapseプロパティを使用することで、すべてのボーダーを一本にまとめることができます。
- 具体的な解決方法は、テーブルのスタイルにborder-collapse: collapse;を追加することです。これにより、テーブルのボーダーが重なることなく、きれいに表示されます。
- また、テーブル要素にborder属性を指定している場合は、これを削除することも重要です。border属性は古い書き方であり、border-collapseプロパティとは互換性がありません。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 table.book_form { border-collapse: collapse; } を追加してみてください。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
tableの枠線の指定のデフォルトはセル間にスペースをとります。分離ボーダーモデル 詳しい資料は 17. 表について ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html ) 17.6 ボーダー（Borders） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html#borders ) すべての、tableに対して分離ボーダーモデルを使用しない場合、 table{border-collapse:collapse;border:1px gray solid;} table td,table th{border:1px gray solid;} と指定しておくと楽です。 なお、HTMLは、 <table summary="なんたらの表" border="1" > で良いです。 1) HTML4.01strict/ウェブ標準ではbordercolor,cellspacing,cellpaddingは非推奨 2) ウェブ標準でHTMLを作成・起動させないとブラウザ間の差の吸収で悩まされます。 3) summary属性はHTML4.01では必須です。 ・・・summaryが書かれていて、かつ一意でしたら要素セレクタで表が特定できます。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ウェブ標準(HTML4.01strict+CSS2.1)です。 ※タブは、＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- /* table共通指定 */ table{ ＿border-collapse:collapse; /* 結合ボーダーモデル */ ＿border:1px gray solid; /* 外枠の設定 */ } table td, table th{/* 見出しセルと値セル */ ＿border:1px gray solid; /* 枠 */ ＿padding:0.25em 0.5em; /* スキマ */ } /* 個別指定 */ table[summary="表のサンプル"]{/* summary属性の値が・・である表 */ border-width:3px; /* 外枠の太さ */ width:40em; /* 幅40文字 */ margin:0 auto;/* 中央配置 */ } table[summary~="表のサンプル"] th{width:12em;}/* 見出しセルの幅 */ table[summary~="表のサンプル"] td{width:26.5em;}/* 値セルの幅 */ --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table summary="表のサンプル" border="1"> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<th abbr="項目">項目</th><th abbr="入力">入力</th> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<th abbr="名">氏名(全角漢字)(W)</th> ＿＿＿＿<td><input type="text" name="name" value="" tabindex="1" size="10" accesskey="W"></td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<th abbr="読">ふりがな(ひらがな)(Y)</th> ＿＿＿＿<td><input type="text" name="yomi" size="30" tabindex="2" value="" accesskey="Y"></td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html>
お礼
お詳しい回答ありがとうございました。
- t_ohta
- ベストアンサー率38% (5238/13705)
CSSに table { border-collapse: collapse; } を追加したら二重にならなくなると思います。
お礼
なおりました。default.cssに加えておきます。ありがとうございました。
お礼
なおりました。default.cssに加えておきます。ありがとうございました。