マルシェル新規登録で5000円分当たる

テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい
テーブルの枠線とテキストフィールの枠を隙間なくピッチリとくっつけたい
です。コードを掲示しますのでご存知の方はどなたか修正願います
<body>
<table width="900" border="1" style="height:25px;">
<tr>
<td rowspan="2" width="400"></td>
<td rowspan="2" width="50"></td>
<td rowspan="2" width="100"><input type="text"readonly="readonly"value="サンプルシステム(株)" style="height:25px;"/></td>
<td rowspan="2" width="50"></td>
<td rowspan="2" width="100"><input type="text"readonly="readonly" value="システム管理者"style="height:25px;"/></td>
<td width="60"style="height:12px;">実施日</td>
<td width="140"><input type="text" readonly="readonly" width="140"value="2010/07/01" style="height:12px;"/></td>
<tr>
<td height="19" style="height:12px;">CODE</td>
<td><input type="text" readonly="readonly" width="140" value="TTSORD50P" style="height:12px;"/></td>
</tr>
</table>
</body>

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

A 回答 (2件)

どの部分の隙間なのかわからないのですが、boderをくっつけたいと言うことでしょうか?



HTMLであれば<table>に「cellpadding="0" cellspacing="0"」を付けます。
CSSであれば<table>に「style="border-collapse:collapse;"」を付けます。

HTMLの場合は、これだと1+1の2pxの枠がつきます。
HTMLで1pxの枠にしたい場合は、

<table cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>

とやるとできます。
    • good
    • 0

tdなどの要素には、内側の余白を指定する「padding」プロパティがあります。


ちなみに、外側の余白は「margin」です。

<style type="text/css">
td { padding: 0px; }
</style>

<td style="padding: 0px;">
でどうぞ。
    • good
    • 0

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

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

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

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

Qでテキストボックスとセルの間にわずかな隙間があいてしまう・・

<TABLE>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
</TALBLE>

こう書くときに、テキストボックスの下にわずかな隙間が
できるのを防ぎたいのですが、何か方法はありませんでしょうか?

Aベストアンサー

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>
</TABLE>
としていませんか?
HTMLとしては好ましくないと思いますが、<FORM>や</FORM>の前後にある<TR><TD>~</TD></TR>を取り除き、以下の様にします。
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<FORM ~>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD><INPUT TYPE="TEXT"></TD>
</TR>
<!-- ここまで -->
</FORM>
</TABLE>

尚、表の罫線を残すのであればBORDERを変更したりしてください。

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>...続きを読む

Qhtmlでテーブル内にテキストボックスを作りたいのですが・・・

教えてください。

2行のテーブルを作ろうとしています。
1行目が項目で
2行目が入力できるようにしたいです。

入力できるようにしたいので
テーブル内にテキストボックスを作ったのですが
どうしてもテーブルを作る囲い線と
テキストボックスの右側の間に余白ができてしまいます。

テキストボックスの下にできる余白は
<form>
<table>
</table>
</form>
という感じで、テーブルをフォームで囲むことで
無くすことができました。

HTMLでこの余白を消せる方法がありましたら
ぜひ、教えてください。
よろしくお願いしますm(__)m

Aベストアンサー

ANo.1です。
「1行目が項目で2行目が入力」という事は、tableの構成は正しくはこうでしたね。

(省略)
<tr>
<th>項目名</th>
</tr>
<tr>
<td><input type="text" size="50" maxlength="100" name="hoge01" value=""></td>
</tr>
(省略)

失礼しました。でも、この結果でも同じですよ。

ただし…仮に、「項目名」に相当するデータのボリュームが、2行目の入力フィールドの長さより相対的に長くなってしまえば、当然余白はできますが。
そういう問題ではないですよね?

Qformのinputなどの幅100%指定

formのinputやtextareaなどの幅を、100%の指定(テーブルの中などにぴったり収まるように)をしたいのですが、できないのでしょうか?

少しずつ様子を見ながら、ちくちくとsizeを指定していくしかないのでしょうか?

Aベストアンサー

 例えば、こんな感じでは如何ですか↓

<form method="POST" action="cgi-bin/xxx.cgi">
<table border=1 width=400>
<tr>
<td>
タイトル:
</td>
<td width=350>
<input type="text" name="title" style="width:100%">
</td>
</tr>
<tr>
<td colspan=2>
<textarea name="memo" style="width:100%" rows=4>
formのinputやtextareaなどの幅を、100%の指定(テーブルの中などにぴったり収まるように)をしたい
</textarea>
</td>
</table>
<input type="submit" value="送信">
<input type="reset" value="取消">
</form>

参考URL:http://www.tohoho-web.com/css/reference.htm#width

 例えば、こんな感じでは如何ですか↓

<form method="POST" action="cgi-bin/xxx.cgi">
<table border=1 width=400>
<tr>
<td>
タイトル:
</td>
<td width=350>
<input type="text" name="title" style="width:100%">
</td>
</tr>
<tr>
<td colspan=2>
<textarea name="memo" style="width:100%" rows=4>
formのinputやtextareaなどの幅を、100%の指定(テーブルの中などにぴったり収まるように)をしたい
</tex...続きを読む

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

QHTML タグ セル内余白を無くす方法

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法?

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を2列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合をしないで、ごく普通に2行2列にすると画像とセル枠との間には余白が生じない。
セル結合した場合に生ずる余白を無くす方法を教えて下さい。エディタは「メモ帖」、OSはWinXP、ブラウザはInternet Explorer6です。

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法?

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を2列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合...続きを読む

Aベストアンサー

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
</table>
</td>
</tr>
</table>

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>...続きを読む

Qtableタグとformタグの組み合わせ

tableタグとformタグの組み合わせでどのように記述すれば、構文上正しいのでしょうか?
私は下のパターンで書いておりますが、間違いでしたら早めに改めたいので
お聞きしました。

<table>
<form>
<input type="hidden" name="a" value="1">
<tr>
<td>
<input type="text" name="b" value="">
</td>
</tr>
<tr>
<td>
<input type="submit" value="OK" value="">
</td>
</tr>
</fomr>
</table>

Aベストアンサー

恐らく、<form>タグを入れると1行分の隙間ができるのでそのように記述しているのでしょう。私も4年ほど前に何かの雑誌でそのように記述しましょう、を確かに見ました。W3Cの理論を無視すれば別に表示するのだから構わないとも思います。
しかし、私の場合、今は、前者様の回答のように<table>の外に記述します。そして、スタイルシートで
<form style="margin:0px;">
とすれば、隙間が無くなります。

Qテキストボックスの背景色変更時に影ができてしまう

テキストボックス選択時に背景色をJavaScriptで変更したく、下記のように書きました。

<input type="text" value="テキストボックスです" onfocus="this.style.backgroundColor='#cccccc'" onblur="this.style.backgroundColor='#ffffff'">

これをWindowsXP+IE6で実行したところ、背景色の処理はうまくいくのですが、画面のプロパティのテーマがデフォルトのWindowsXPの場合、元は影のないテキストボックスなのですが、背景色変更時に影つきのテキストボックスになってしまいます。
テーマがWindowsクラシックだと元々影つきなので変化しません。

背景色変更時に影つきにならないようにできませんでしょうか?
それともこれはIE6のバグなのでしょうか?

Aベストアンサー

私の経験では、これに限らずスクリプトでスタイルを変更すると、「背景色」という設定より以前に、「スタイルなし」→「スタイルあり」に設定され、影響する他のスタイルは、妙なデフォルトになってしまうようです。
たとえば今回の件では、「スタイルあり」になった時点で、borderStyleが設定されてしまうということです(立体 groove とか)。
で、これを解決するには、先に「スタイルあり」にしておくのが最善と思います。

<input type="text" value="テキストボックスです"
style="border:1px solid #7A96DF;background-color:#ffffff;"
onfocus="this.style.backgroundColor='#cccccc'"
onblur="this.style.backgroundColor='#ffffff'">

ちなみにonblurで白に「戻して」いますが、そもそも選択前が白とは限らないので、上記のようにあらかじめ選択前を白にしておいたほうが良いと思います。

私の経験では、これに限らずスクリプトでスタイルを変更すると、「背景色」という設定より以前に、「スタイルなし」→「スタイルあり」に設定され、影響する他のスタイルは、妙なデフォルトになってしまうようです。
たとえば今回の件では、「スタイルあり」になった時点で、borderStyleが設定されてしまうということです(立体 groove とか)。
で、これを解決するには、先に「スタイルあり」にしておくのが最善と思います。

<input type="text" value="テキストボックスです"
style="border:1px solid #7...続きを読む

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>


人気Q&Aランキング