ママのスキンケアのお悩みにおすすめアイテム

初歩的な質問ですが、テーブルタグに、線をつける際に、枠だけついたり、下記のように記述しても、
真ん中のtr もしくは th や td の上下か左右がかぶってしまい、局所的に2本になってしまいます。(他に比べて太くなります。)

.book_form tbody tr .mailform, .book_form tbody tr .mailtext {
border: 1px solid #666;
}

すべてのラインを1本にして、きれいに見せるにはどのようにしたいいでしょうか。

ちなみに、<table class="book_form" border="1" bordercolor="#666"cellspacing="0" cellpadding="3">
こちらでもうまく表示されません。

CSSでの記述があるものだと助かります。

構成は、
<table>
<tbody>
<tr></tr>
<th></th>
<td></td>
</tbody>
</table>
です。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

こんにちは。



table.book_form { border-collapse: collapse; }
を追加してみてください。
    • good
    • 0
この回答へのお礼

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

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

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">
<!--
/* 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>
    • good
    • 0
この回答へのお礼

お詳しい回答ありがとうございました。

お礼日時:2012/05/22 23:48

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

    • good
    • 0
この回答へのお礼

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

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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブルが二重で表示されてしまいます。

<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で開くと、テーブルが二重に表示されてしまいます。
一本にしたいのですが、うまくいかなくて困っています。
どのようにすれば一本に出来るのでしょうか…
どなたか詳しい方教えてください。
よろしくお願いします。

Aベストアンサー

ブラウザに依存する属性を使うべきではないと思います。

HPの素 サンプルページ:tableの枠 frame rules
http://www5d.biglobe.ne.jp/~nextpage/hpm_sp_h5.html

<table cellspacing="1" cellpadding="0"
style="width: 50; text-align: left; border: 1px black solid;">
<tr><td><a href="test1.html">test</a></td></tr>
<tr><td><a href="test2.html">test</a></td></tr>
</table>

あとスタイルは CSSで設定した方がいいと思います。

Qテーブルの枠が2重線になるので

Border=1
にしてみましたが駄目でした
テーブル枠を1重線にするにはどうしたらいいのでしょうか?

<table border=1 cellspacing=0 cellpadding=0>
<caption align=left>
<nobr>あいうえおかきくけこ<nobr/>
</caption>
<tr><td colspan=3>abc</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td colspan=3 height=15></td></tr>
</table>

Aベストアンサー

>やはりTDすべてに設定するしか方法は無いのですね
一人で思い込むのはやめましょう。

HTMLタグに属性を付加すればよいだけです。


<head>
<STYLE TYPE="text/css">
<!--
TABLE {
border-collapse : collapse;
}
TH,TD {
border : solid 1px black;
}
-->
</style>
</head>

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qテーブル内の一部のみ線を変更する方法ってありますか?

いつもお世話になっております。どなたか教えて下さい。
無理なら無理で結構ですので不可能だと回答下さい。

あるテーブル内の一部のみ線を点線にしたり、線幅を細くする方法があれば教えてほしいのですが・・・可能でしょうか?

イメージはエクセルのように一部の罫線だけを変更したいのです。宜しく御願いします。

1つのテーブルで実現不能ならば、複数のテーブルを自由に結合する方法とかないでしょうか?

むちゃくちゃ言って申し訳ありませんが、どなたか救いの手をお願いします。

ちなみにブラウザはIE5.0か6.0だと思います。

Aベストアンサー

スタイルシートを用いることで可能です。
以下の例ではタグに直接style属性を埋め込んでいますが、
先にstyle指定をしておくと楽かもしれません。
<table border="1" bordercolor="black">
<tr>
<td style="border-top-style:dashed;border-left:3px solid red;border-bottom-width:2px;border-right-color:blue;">あああ</td>
</tr>
</table>
詳しくは、スタイルシート、CSSなどで調べてみてください。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング