javascript - JavaScriptでテーブルを揃える

Question

これは2つの部分からなる質問です。私は複数のタグの下で検索して、役に立たないという答えを見つけました。

私は4つの列と4つのナゲットを含むテーブルを持っていますが、4つの列がページの下部全体の幅になるように、ページの読み込み時にそれらを自動整列させようとしています。ユーザーが22インチのワイドスクリーンでも15インチのスクリーンでも同じように見えるようにしたいと思います。

1. これはJavaScriptで行うのが最善でしょうか、それともこれを行うためのより効率的な方法がありますか？
2. これをどのように達成しますか？

編集：申し訳ありませんが、もっと具体的にすべきでした、これは私のコードです：

    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
                <tbody>
                    <tr>
                        <td align="right" valign="top" id="col-1">
                            <div id="nugget1" align="right" style="height: 459px;">
                                <div id="nugget1-content" align="left">
                                    <h2 class="menutitle"> FAQ's </h2>

                                </div> 
                            </div>
                        </td>
                        <td valign="top" id="col-2">
                            <div id="nugget2" align="center" style="height: 459px;">
                                <h2 class="menutitle"> Contacts </h2>
                            </div>
                      </td>                                    
                      <td valign="top" id="col-3">
                            <div id="nugget3" align="center" style="height: 459px;">
                                 <h2 class="menutitle"> Calendar </h2>
                                    <ul class="vertmenu">  
                                        <li>
                                            <a href="http://www.youtube.com/watch?v=5F5v1EYaSTA"> Shared Calendars </a>
                                        </li>
                            </div>
                        </td>
                        <td valign="top" id="col-4">
                             <div id="nugget4" align="center" style="height: 459px;">
                                 <h2 class="menutitle"> Mail </h2>
                             </div>
                      </td>

                  </tr>
                </tbody>
             </table>

Answer 1

ナゲットがテーブルセルであると仮定すると、これはおそらくあなたが探しているものです：

1. これはCSSの仕事のように聞こえます。

2. 関連するCSS：

   テーブル{幅：100％; }

Answer 2

おそらくこれを使用して、画面の解像度に対応するようにテーブルの幅を設定してみることができますか？

<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
Body html here
</td>
</tr>
</table>

Answer 3

テーブルに実際のHTML<table>タグを使用している場合、それを行う最も簡単な方法はタグを使用することです<colgroup>。

あなたの場合、コードは次のようになります。

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
    <colgroup width="25%" />
    <tbody>
        <tr>
            <td align="right" valign="top" id="col-1">
                <div id="nugget1" align="right" style="height: 459px;">
                    <div id="nugget1-content" align="left">
                        <h2 class="menutitle"> FAQ's </h2>
                    </div> 
                </div>
            </td>
            <td valign="top" id="col-2">
                <div id="nugget2" align="center" style="height: 459px;">
                    <h2 class="menutitle"> Contacts </h2>
                </div>
            </td>                                    
            <td valign="top" id="col-3">
                <div id="nugget3" align="center" style="height: 459px;">
                    <h2 class="menutitle"> Calendar </h2>
                    <ul class="vertmenu">  
                        <li>
                            <a href="http://www.youtube.com/watch?v=5F5v1EYaSTA"> Shared Calendars </a>
                        </li>
                </div>
            </td>
            <td valign="top" id="col-4">
                <div id="nugget4" align="center" style="height: 459px;">
                    <h2 class="menutitle"> Mail </h2>
                </div>
            </td>
        </tr>
    </tbody>

の属性は、<colgroup>そのグループのすべての列に適用されます。個々の列のいずれかに実行したい特定のスタイルがある場合は、各列<col>の内にタグを追加<colgroup>して、それらを定義できます。<colgroup>タグを相互にネストすることもできます。

Answer 4

valignこのような古いHTML（レイアウト用のテーブル、HTMLのようなものの使用など）を使用する特別な理由がない限り、align（ページの読み込みに関して）最も効率的な方法は、再構築することです。 HTMLから次のようなものへ：

<div id="nuggets">
  <div id="nugget1">
    <h2 class="menutitle"> FAQ's </h2>
  </div> 
  <div id="nugget2" class="col">
     <h2 class="menutitle"> Contacts </h2>
  </div>
  <div id="nugget3">
     <h2 class="menutitle"> Calendar </h2>
     <ul class="vertmenu">  
       <li>
         <a href="http://www.youtube.com/watch?v=5F5v1EYaSTA"> Shared Calendars </a>
       </li>
  </div>
  <div id="nugget4">
    <h2 class="menutitle"> Mail </h2>
  </div>
</div>

次に、次の行に沿ってCSSを作成できます。

#nuggets {
  height: 459px;
}

#nuggets > div {
  width: 25%;
  height: 459px;
  float: left;
  text-align: center;
}