html tableのボーダーを二重にする問題と解決方法
- テーブルタグを使用して線を表示させる際に、一部の要素が二重のボーダーになってしまう問題が発生します。この問題を解決するためには、CSSでborder-collapseプロパティを使用することで、すべてのボーダーを一本にまとめることができます。
- 具体的な解決方法は、テーブルのスタイルにborder-collapse: collapse;を追加することです。これにより、テーブルのボーダーが重なることなく、きれいに表示されます。
- また、テーブル要素にborder属性を指定している場合は、これを削除することも重要です。border属性は古い書き方であり、border-collapseプロパティとは互換性がありません。
- ベストアンサー
html table の中のボーダーが二重になる
初歩的な質問ですが、テーブルタグに、線をつける際に、枠だけついたり、下記のように記述しても、 真ん中のtr もしくは th や td の上下か左右がかぶってしまい、局所的に2本になってしまいます。（他に比べて太くなります。） .book_form tbody tr .mailform, .book_form tbody tr .mailtext { border: 1px solid #666; } すべてのラインを１本にして、きれいに見せるにはどのようにしたいいでしょうか。 ちなみに、<table class="book_form" border="1" bordercolor="#666"cellspacing="0" cellpadding="3"> こちらでもうまく表示されません。 CSSでの記述があるものだと助かります。 構成は、 <table> <tbody> <tr></tr> <th></th> <td></td> </tbody> </table> です。
- puhui
- お礼率34% (112/329)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （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% (5071/13248)
CSSに table { border-collapse: collapse; } を追加したら二重にならなくなると思います。
お礼
なおりました。default.cssに加えておきます。ありがとうございました。
関連するQ&A
- borderとcellspacingの違い
<table border=0 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table cellspacing=0 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table cellspacing=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 cellspacing=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 cellspacing=0 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> いろいろサンプルを作ってみたのですが、 結局borderとcellspacingは、どう違うのでしょうか？
- ベストアンサー
- HTML
- 特定のテーブルのみ枠線の色を消したい
スタイルシートで他のテーブルの為に色を設定しているけど 特定のテーブルのみ、枠線の色をすべて消したい場合は、 どうすればよろしいでしょうか？ <style type="text/css"> table {border:1px solid red;} table tr {border:1px solid red;} table th {border:1px solid red;} table td {border:1px solid red;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> このソースだと、テーブルならすべて枠線が付いてしまいます。 特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか？
- ベストアンサー
- CSS
- テーブルサイズ指定
こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という２つのテーブルで、 ２つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- colspan セルの結合について
テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>
- 締切済み
- HTML
- Tableずれ
いつもお世話になっております。 ソースは以下の様となります、htmlのときが正常に表示されますが。 JSP化すると微妙が所にテーブルがずれてしまい、これを解消するにはどんな解決あるかな？ <html> </body> <table width="700" border="0" cellspacing="0"> <tr> <td valign="top"><table width="100" border="1" cellspacing="0" bordercolor="#FF3366" > <tr align="center"> <td height="23" ><img src="../Assets/Body/Common/StaffList.gif" alt="スタッフ" width="31" height="12" /></td> </tr> <tr align="center"> <td height="23" >田中栄子</td> </tr> ・ ・ //この部分がJSP上がループ処理となる ・ </table> </td> <td valign="top"> <div style="overflow-x:scroll; width:601px; scrollbar-track-color: #FFffff; scrollbar-face-color:#ff3366; scrollbar-shadow-color: #ff3366; scrollbar-highlight-color: #ff3366; scrollbar-arrow-color: #ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-3dlight-color:#ffffff;"> <table width="1200" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF3366" > <tr align="center" class="time_font" > <td> ・ ・ //この部分がJSP上がループ処理となる ・ ・ ・ ・ </td> </tr> </table> </div> </td> </tr> </table> </body> </html> ちょっと長いですが、見ていただいてありがとうございます、賜りたく切にご回答をまちしておております。
- 締切済み
- HTML
- テーブルのテーブルの間に間ができるのでしょうか？
はじめまして、超html初心者のものです。 なぜ同じようテーブルを３つ書いているのに一番上のテーブルと真ん中のテーブルの間が開いてしまっているのかがわかりません。 あと、一番上のテーブルの-から先をもう少し左に寄せることもうまくいきません。 なにかアドバイスをよろしくお願いします。 ↓これがソースです。 <html> <head><title>test</title> </head> <form> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">日付け：</th> <td width=284> <input type="text"><input type="button"> </td> <td> - </td> <td><input type="text"><input type="button"></td> </tr> </table> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">部署：</th> <td width=100> <select name="busyo"></select> </td> <th width=80 align="right">営業所：</th> <td width=100> <select name="eigyousyo"></select> </td> <th width= 80 align="right">担当コード:</th> <td width=450> <select name="tantocode"></select> </td> </tr> </table> <table border=1cellspacing=0cellpadding=2width=760> <tr> <th width=80 align="right">権限:</th> <td width=700> <select name="kengen"></select> </td> </tr> </table> </form> </html>
- 締切済み
- HTML
- cellpadding
<table border=1 cellspacing=1 cellpadding=20> <tr><th>a</th><th>b</th></tr> <tr><td>1</td><td>2</td></tr> </table> としたときに、セル内の左右上下に空白ができますが、 上下のみ空白を作るにはどうすればいいでしょうか？ 左右は詰めたいです。（左に）
- 締切済み
- HTML
- テーブルの線の幅を一重の線にしたい
<HTML DIR=LTR> <HEAD> </HEAD> <BODY> <TABLE border=1 bordercolor="#808080"> <TR> <TH>タイトル</TH> </TR> <TD>aaa</TD> </TR> <TR> <TD>bbb</TD> </TR> <TR> <TD>ccc</TD> </TR></TABLE> </BODY> </HTML> これにすると画像のように線の幅が二重線になってしまうのですが、 一重にするにはどうすればいいですか？ <TABLE border=1 を<TABLE border=0にすると、線が消えてしまいます。
- ベストアンサー
- HTML
- テーブルが二重で表示されてしまいます。
<TABLE border=1 width="50" rules="cols" align="left" cellspacing="1" cellpadding="0" bordercolor="black"> <TR bgcolor="white"><TD><a href="test1.html">test</a></TD></TR> <TR bgcolor="white"><TD><a href="test2.html">test</a></TD></TR> </TABLE> このHTMLをIEで開くと、テーブルが二重に表示されてしまいます。 一本にしたいのですが、うまくいかなくて困っています。 どのようにすれば一本に出来るのでしょうか… どなたか詳しい方教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
お礼
なおりました。default.cssに加えておきます。ありがとうございました。