
教えてください。
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も見ています
-
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
HTML tableのセルにtextareaを使って外の枠に重ねて表示する方法
HTML・CSS
-
tableタグとformタグの組み合わせ
HTML・CSS
-
-
4
jspからServletを呼び、元のjspページに戻るにはどうしたらよいですか?
Java
-
5
HTMLでDBからデータを表形式で表示するには?
HTML・CSS
-
6
JSPの処理の途中で、JavaScriptの処理をしたい
JavaScript
-
7
submitをボタン以外にするには
HTML・CSS
-
8
formのinputなどの幅100%指定
HTML・CSS
-
9
ウィンドウのサイズを変えても表示を崩れないようにしたい
HTML・CSS
-
10
テーブルの最後(最新)のレコードを抽出したい
MySQL
-
11
テーブルの位置を細かく指定したい。
HTML・CSS
-
12
プルダウンメニューを表の中に入れるには?
JavaScript
-
13
ボタンをセル内一杯に表示させる方法はありませんか?
HTML・CSS
-
14
html でのテキスト結合について
その他(プログラミング・Web制作)
-
15
Java-jspの画面入力値保持について
Java
-
16
htmlの文字が縦書きになる
HTML・CSS
-
17
visual studio でインデントを自動的に揃えるショートカットキー
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlでテーブル内にテキストボ...
-
Firefoxでページ位置が微妙にず...
-
ノーマルヤリスとGRヤリス
-
PDFへてのテキストボックスにて...
-
CSSのtransform: translate(-50...
-
エクセルでサイズに合ったもの...
-
敬語
-
エクセル 画面表示拡大率によ...
-
<h1>タグの後の行間を詰めたい。
-
<tbody>は何のためにあるんでし...
-
dreamweaverで、テーブルのボー...
-
Excel セルの幅が合わない
-
挿入した文字に枠をつけたい
-
text-alignの解除の方法
-
エクセルの行幅と列幅
-
エクセルの行の幅がずれる
-
FireFoxで見るとブラウザの幅に...
-
Excelの列や行の幅を表示...
-
ホームページビルダーでセルの...
-
フォームが枠で囲えない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlでテーブル内にテキストボ...
-
TD、THタグ内の水平罫線(...
-
テーブル内の一部のみ線を変更...
-
markdownでテーブルの罫線は、...
-
【ホームページビルダー】表の...
-
colspanで余計な余白
-
SEO対策 <Body>タグ直下のテキ...
-
テーブルを画面にの幅いっぱい...
-
<H1>を使わずに<H2>以下を使用...
-
実行結果をデジタル時計みたい...
-
<HR>タグについて
-
web標準、実際どのくらい実行さ...
-
Firefoxでページ位置が微妙にず...
-
スペースが空きすぎて困ってい...
-
Dreamweaverのテーブル内テキス...
-
CSSでボックスにborderをつけた...
-
テーブルについて
-
gooブログに表を挿入できないで...
-
サイト全体を中央に表示したい...
-
スタイルシートによる支配を抜...
おすすめ情報