html table の中のボーダーが二重になる

解決済

質問者：puhui
質問日時：2012/05/21 11:21
回答数：3件

初歩的な質問ですが、テーブルタグに、線をつける際に、枠だけついたり、下記のように記述しても、
真ん中の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>
です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1ベストアンサー

回答者： LancerVII
回答日時：2012/05/21 11:27

こんにちは。

table.book_form { border-collapse: collapse; }
を追加してみてください。

- 0
- 件

通報する

この回答へのお礼

なおりました。default.cssに加えておきます。ありがとうございました。

通報する

お礼日時：2012/05/22 23:47

No.2

回答者： t_ohta
回答日時：2012/05/21 11:28

CSSに　table { border-collapse: collapse; }　を追加したら二重にならなくなると思います。

- 0
- 件

通報する

この回答へのお礼

なおりました。default.cssに加えておきます。ありがとうございました。

通報する

お礼日時：2012/05/22 23:47

No.3

回答者： ORUKA1951
回答日時：2012/05/21 18:26

tableの枠線の指定のデフォルトはセル間にスペースをとります。

分離ボーダーモデル
詳しい資料は
17. 表について ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　17.6 ボーダー（Borders） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

すべての、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. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　ウェブ標準(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">

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