
教えてください。
2行のテーブルを作ろうとしています。
1行目が項目で
2行目が入力できるようにしたいです。
入力できるようにしたいので
テーブル内にテキストボックスを作ったのですが
どうしてもテーブルを作る囲い線と
テキストボックスの右側の間に余白ができてしまいます。
テキストボックスの下にできる余白は
<form>
<table>
</table>
</form>
という感じで、テーブルをフォームで囲むことで
無くすことができました。
HTMLでこの余白を消せる方法がありましたら
ぜひ、教えてください。
よろしくお願いしますm(__)m
No.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行目の入力フィールドの長さより相対的に長くなってしまえば、当然余白はできますが。
そういう問題ではないですよね?
No.1
- 回答日時:
> どうしてもテーブルを作る囲い線とテキストボックスの右側の間に余白ができてしまいます。
サンプルで検証してみましたが、その様にはなりませんが…?
---------------------------------------------------------------------
【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等での表示結果では、質問者様の仰る様なセルと入力フィールドとの間の隙間、はできません。
何か余計なスタイルを指定していませんか?実際のソースをもう少し詳細に補足して下さると原因が特定できるかもしれません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
HTML tableのセルにtextareaを使って外の枠に重ねて表示する方法
HTML・CSS
-
tableタグとformタグの組み合わせ
HTML・CSS
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
-
4
formのinputなどの幅100%指定
HTML・CSS
-
5
プルダウンメニューを表の中に入れるには?
JavaScript
-
6
visual studio でインデントを自動的に揃えるショートカットキー
その他(プログラミング・Web制作)
-
7
日付型のフィールドに空白を入れる方法を教えてください
その他(データベース)
-
8
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
9
JSPの処理の途中で、JavaScriptの処理をしたい
JavaScript
-
10
テーブル内でドロップダウンメニューを使った際の行間
HTML・CSS
-
11
HTML 表の上に文字がきてしまうのですが・・・ ホームページ
その他(パソコン・スマホ・電化製品)
-
12
jspからServletを呼び、元のjspページに戻るにはどうしたらよいですか?
Java
-
13
ボタンをセル内一杯に表示させる方法はありませんか?
HTML・CSS
-
14
html でのテキスト結合について
その他(プログラミング・Web制作)
-
15
Java-jspの画面入力値保持について
Java
-
16
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
17
HTMLでDBからデータを表形式で表示するには?
HTML・CSS
-
18
htmlの文字が縦書きになる
HTML・CSS
-
19
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
20
Access 最後のレコードに到達するまでループ処理を行う方法
Access(アクセス)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlでテーブル内にテキストボ...
-
スペースが空きすぎて困ってい...
-
エクセルでサイズに合ったもの...
-
エクセルでサイズ指定でPOP...
-
なぜ左に寄っているの?
-
Excelの列や行の幅を表示...
-
PDFへてのテキストボックスにて...
-
ワードで「 」(カギかっこ)の...
-
aタグに直接style=""で:hoverを...
-
バーコードのサイズは拡大縮小...
-
<td> 内のテーブルを上寄せにす...
-
ホームページビルダー 空白の...
-
『入力文字列 + .html』 に...
-
FC2ホームページで大見出しのフ...
-
ホームページビルダーで表の列...
-
ホームページビルダーで、画面...
-
HTMLでクロス抽出したい
-
Excelで文字の幅を変える方法
-
道路幅を調べたいのですが
-
パソコンでランドルト環の作成...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlでテーブル内にテキストボ...
-
TD、THタグ内の水平罫線(...
-
テーブルタグの配置について
-
レイアウトして表を作りたい
-
スタイルシートによる支配を抜...
-
テーブル内の一部のみ線を変更...
-
Iフレームを置いているページの...
-
テーブルの罫線について
-
markdownでテーブルの罫線は、...
-
iframeのスクロールバー:縦だ...
-
表を作るときに枠線を
-
【ホームページビルダー】表の...
-
外枠線と内枠線の色の指定
-
二つのテーブルを横に並べて表...
-
web標準、実際どのくらい実行さ...
-
表組について
-
スタイルシートで対応できますか?
-
adobe GoLiveでテ...
-
<H1>を使わずに<H2>以下を使用...
-
スペースが空きすぎて困ってい...
おすすめ情報