2011-02-04 13 views
0

HTMLテーブルの固定幅値を計算するための標準的な方法はありますか?今、私は固定幅であるためにWebページ上のテーブルを書式化する作業をしています。私は別のテーブル内にテーブルを持っています。IEでページをテストすると、コロンの位置合わせは、説明する。私の意図は、Firefoxのようにコロンが正しく整列されているかどうかを確認することです.HTMLの設定が間違っている場合や、ブラウザがページをレンダリングする方法と関連がある場合は不思議です。標準固定テーブル幅

のFirefox: enter image description here

のInternet Explorer:

enter image description here

UPDATE:

任意の参照コードを提供していないため申し訳ありませんが、ここで私が働いている特定のセクションのスニペットです。

<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;"> 
    <span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span> 
    <table style="width: 1000px;" align="Center" border="0"> 
     <tbody> 
      <tr> 
       <td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td> 
      </tr> 
      <tr> 
       <td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td> 
      </tr> 
      <tr> 
       <td style="width: 1000px;"> 
       <table style="width: 1260px;" border="0"> 
        <tbody> 
         <tr> 
          <td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td> 
          <td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td> 
         </tr> 
         <tr> 
          <td></td> 
         </tr> 
         <tr> 
          <td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td> 
          <td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td> 
         </tr> 
        </tbody> 
       </table> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

私はそれは、ちょうどノート醜いと知って、これは、ASP.NetのWebページを生成し、私は背後にあるコードからプロ文法的にHTML要素の属性を設定しています。私はこれを継承し、私の雇用主は大きな変化を最小限に抑えたいと考えています。

UPDATE 2:

私が1377pxに設定すると、それはIEに並ぶ取得することができ、内部テーブルの幅を調整します。 Firefoxの場合、整列のためのスイートスポットは1260ピクセルです。

+0

ようなものになるだろう。とにかく、レイアウトを適切に見るためには、htmlやcssが役に立ちます。私の推測では、固定幅のTDを作成してラッピングできるようにする必要がありますが、おそらく既にそのようにしているでしょうか? – AJJ

答えて

0

あなたがしなければならないことは、テーブルの列をお互いに同じ幅にすることです。

スタイルの例:

table tr td:first-child { background-color:yellow; width:200px; } 

HTML:

<table> 
    <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> 
    <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> 
    <tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr> 
</table> 
0

直接あなたの質問に答えていないため申し訳ありませんが、...は

Stoneageは終わりました!あなたは本当に障害のある人にとってはほとんどアクセスできず、HTMLファイルが大きすぎる(コンテンツに関して)ので、レイアウトの目的でテーブルを使用すべきではありません。

別個のコンテンツとレイアウトは、CSSを使用してください。

+2

これはイデオロギー的な疑問であり、「あなたが今までに行ったことすべてについて考える」とは言いません。 – aorcsik

+0

ええ、私は本当に彼の質問に直接答えないのは残念ですが、私はテーブルレイアウトを立てることができません。申し訳ありません、仲間。 :) – anroesti

+0

まず、これはコメントとしての方が適しており、質問に対する回答ではありません。第二に、テーブルベースのレイアウトを使用することが「時代遅れ」であることは間違いないが、単に彼が選ぶ力を持っているとは思えない...クライアントのウェブサイトを維持しているかもしれないし、たぶん彼はこのコードを使って表形式のデータのレイアウトを作成しています(テーブルを使用する方がdivを使用するよりも忠実なシナリオ)。あなたは考えを得る... – Moses

0

を使用すると、1つのテーブルに一緒に整列する部品を配置することを確認します。

<table id="layout"> 
    <tr><td>HEADER</td> 
    <tr><td> 
     <table id="form"> 
      <tr><td>LABEL</td><td>INPUT FIELD</td></tr> 
      <tr><td>LABEL</td><td>INPUT FIELD</td></tr> 
      <tr><td>LABEL</td><td>INPUT FIELD</td></tr> 
     </table> 
    </tr> 
    <tr><td>FOOTER</td> 
</table> 
0

私は2つのクラス、leftrightを作成して、右側に<td>に左右クラスに<td>に左のクラスを適用します。左のクラスは、私は最後の手段としてのみネストした表でこれを行うだろう

.left{width:100px; text-align:right;} 

heres an example

関連する問題