2
こんにちは皆私はいくつかの異なるフィールドグループを含むフォームを持っています。それらを一緒に保つために、私はdiv要素を使って、それらをテーブル要素のように動作させました。このメソッドを使用して、フォームの内部にある表要素を回避しました。一方、一部の人々は、divのテーブルをテーブルのように動作させてから、このアプローチは基本的に同じだと言いました。正直言って、これが最善の選択肢かどうかは分かりません。ここに私のコードの例があります。divセルをthのように動作させる方法を教えてください。
form {
\t width: 820px;
}
form.frmLayout fieldset {
\t border: #ccc 2px solid;
\t margin: 10px;
\t border-radius:3px;
}
form.frmLayout legend {
\t font-weight: bold;
\t background-color: #c8e2db;
\t border-radius:3px;
\t padding: 3px;
\t border: #ccc 2px solid;
}
form.frmLayout label {
\t float: left;
font-weight: bold;
display: block;
}
form.frmLayout input[type=text] {
\t text-align: left;
\t background-color: #c8e2db;
}
div.formItem {
\t margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-repeat: repeat-x;
clear: both;
border-bottom: #ccc 2px dashed;
}
div.formItem:last-child{
\t border-bottom: none;
}
div.formTbl {
\t display: table;
\t width: 100%;
}
div.frRow {
\t display: table-row;
\t text-align: left;
}
div.frCell {
\t display: table-cell;
\t padding-top: 2px;
\t padding-bottom: 2px;
\t padding-left: 0px;
\t padding-right: 0px;
\t text-align: center;
}
div.frCell span {
\t font-weight: bold;
}<form name="myForm" id="myForm" method="POST" action="#" class="frmLayout">
\t \t <input type="hidden" name="frmhs_id" id="frmhs_id" value="" />
\t \t <fieldset>
\t \t \t <legend>My Form</legend>
<div class="formItem">
\t \t \t \t <div class="formTbl">
\t \t \t \t \t <div class="frRow">
\t \t \t \t \t \t <div class="frCell" style="width:60%;">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="frCell" style="width:40%;">
\t \t \t \t \t \t \t <div class="formTbl">
\t \t \t \t \t \t \t \t <div class="frRow">
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:40%;">
\t \t \t \t \t \t \t \t \t \t <span>Acoustic Reflex Thresholds</span>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="frRow">
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <span>500</span>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <span>1000</span>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <span>2000</span>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <span>4000</span>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="frRow">
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <input type="text" name="frmhs_td6" id="frmhs_td6" value="" size="4" maxlength="4" />
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <input type="text" name="frmhs_td7" id="frmhs_td7" value="" size="4" maxlength="4" />
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <input type="text" name="frmhs_td8" id="frmhs_td8" value="" size="4" maxlength="4" />
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <input type="text" name="frmhs_td9" id="frmhs_td9" value="" size="4" maxlength="4" />
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="frRow">
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <input type="text" name="frmhs_td15" id="frmhs_td15" value="" size="4" maxlength="4" />
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <input type="text" name="frmhs_td16" id="frmhs_td16" value="" size="4" maxlength="4" />
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <input type="text" name="frmhs_td17" id="frmhs_td17" value="" size="4" maxlength="4" />
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="frCell" style="width:10%;">
\t \t \t \t \t \t \t \t \t \t <input type="text" name="frmhs_td18" id="frmhs_td18" value="" size="4" maxlength="4" />
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
<div class="formItem">
\t \t \t \t <div style="float:left;">
\t \t \t \t \t <span><input type="submit" name="frmSubmit" id="frmhdSubmit" value="Submit"></span>
\t \t \t \t </div>
\t \t \t \t <div style="float:right;">
\t \t \t \t \t <span id="MsgFrm"></span>
\t \t \t \t </div>
\t \t \t </div>
\t \t </fieldset>
\t </form>
あなたはタイトルAcoustic Reflex Thresholds上記の私の例でわかるように中央にではありません。また、divセルの最初のセットに影響して幅が変わると思います。 divセルの長さ全体にどのようにタイトルをつけることができるのだろうか？誰かがこれがどのように修正できるかを知っていたり、これを行うより良い方法があれば教えてください。前もって感謝します。
何をDIVません。それはあなたのコードを大幅に簡素化するはずです。問題のセルで 'colspan'を使うことができます。 –
@RickHitchcockフォーム要素の内部でshouldテーブルには非常に多くのブログと意見があります。私はこのためにテーブルを使うのがいかに簡単だろうと知っています。 –
レイアウト用にのみテーブルを使用すべきではありませんが、これは表形式のデータです。 –