gooドクター有料プランが1ヶ月間無料!

教えてください。

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

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

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

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

gooドクター

A 回答 (2件)

ANo.1です。


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

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

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

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

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



サンプルで検証してみましたが、その様にはなりませんが…?
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<link href="/css/sample.css" type="text/css" rel="stylesheet" media="all">
</head>

<body>
<form method="post" action="#">
<table class="hoge" summary="入力フォーム">
<tr>
<th>項目名</th>
<td><input type="text" size="50" maxlength="100" name="hoge01" value=""></td>
</tr>
</table>
</form>
</body>
</html>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
table.hoge {
border-collapse: collapse;
}
table.hoge th,
table.hoge td {
padding: 0;
border: solid 1px #000;
}
---------------------------------------------------------------------
たったこれだけの指定でも、IEやFirefox等での表示結果では、質問者様の仰る様なセルと入力フィールドとの間の隙間、はできません。
何か余計なスタイルを指定していませんか?実際のソースをもう少し詳細に補足して下さると原因が特定できるかもしれません。
    • good
    • 1

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

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

gooドクター

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

人気Q&Aランキング