
教えてください。
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も見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
tableタグとformタグの組み合わせ
HTML・CSS
-
HTML tableのセルにtextareaを使って外の枠に重ねて表示する方法
HTML・CSS
-
テーブル内の文字サイズを変更したい。
HTML・CSS
-
4
テーブル内でドロップダウンメニューを使った際の行間
HTML・CSS
-
5
テーブルのヘッダとボディの幅がズレルのを防ぐ
HTML・CSS
-
6
<TD><input type=text"></TD>でテキストボックスとセルの間にわずかな隙間があいてしまう・・"
HTML・CSS
-
7
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
8
フォームで同じ複数のnameで違うvalueの送信
Java
-
9
ボタンをセル内一杯に表示させる方法はありませんか?
HTML・CSS
-
10
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
11
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
12
テーブルの任意の列を非表示にしたい
HTML・CSS
-
13
日付型のフィールドに空白を入れる方法を教えてください
その他(データベース)
-
14
<JavaScript>tableタグを入力不可にしたい。
JavaScript
-
15
テーブルとテーブルの間隔について
HTML・CSS
-
16
テーブルの位置を細かく指定したい。
HTML・CSS
-
17
value内に変数を入れたい
JavaScript
-
18
SQL 複数テーブルのupdate
Oracle
-
19
HTMLからフォルダを開きたい
HTML・CSS
-
20
【SQL】他テーブルに含まれる値に合致する行を抽出
その他(データベース)
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
人気Q&Aランキング
-
4
<table>の<thead>を固定したい。
-
5
DREAMWEAVERでテーブルに枠線
-
6
<H1>を使わずに<H2>以下を使用...
-
7
Dreamweaverのテーブル内テキス...
-
8
colspanで余計な余白
-
9
アダルトなコミックで 濡れ透け...
-
10
バーコードのサイズは拡大縮小...
-
11
CSSのtransform: translate(-50...
-
12
エクセルでサイズ指定でPOP...
-
13
Excelの列の幅(ピクセル)につい...
-
14
エクセルの行の幅がずれる
-
15
<tbody>は何のためにあるんでし...
-
16
<td> 内のテーブルを上寄せにす...
-
17
HTMLフォームのSELECTの幅を一...
-
18
aタグに直接style=""で:hoverを...
-
19
なぜ左に寄っているの?
-
20
Excel セルの幅が合わない
おすすめ情報
公式facebook
公式twitter