4

私は一時的に私たちのプロジェクトのウェブサイトのフロントエンドの世話をする責任を引き継いでいます。私たちのウェブメンテナーが去ったばかりで、まだ交代要員がいないからです（そして私はとにかく夏の学生なので、私もすぐに休みます。 ..）。私はHTML/CSS / etcの経験があまりなく、上司が望むようにテーブルをフォーマットするのに問題があります。表のHTML/CSS（私ができると思う限り削減）は次のとおりです。

<html>
 <head>
  <style type="text/css">

            /* Old CSS from web-guy before me */
  h5 { 
   font-size: 150%; 
   color: #878796;
   font-family: Arial,Helvetica,sans-serif;
  }

  .details-container {
   border-right : 1px;
   border-right-color:#F6F6F6;
   float:left;
  }

  .title-details h5 {
   text-align: center;
   margin: 0px;
   margin-bottom: 5px;
   margin-top: 5px;
  }

  /* From here on it is mostly my CSS */
  table.center {
   margin-left:auto;
   margin-right:auto;
  }

  .details-column-left{
   text-align:right;
   padding-right:2px;
  }

  .details-column-right{
   text-align:left;
   padding-left:2px;
  }

  </style>
 </head>
 <body>
  <div class="details-container">
   <div class="title-details">
     <h5>Details</h5>
   </div>

   <div class="details">
    <table class="center">
     <tr>
      <th class="details-column-left">Title</th>
      <td class="details-column-right">Prince</td>
     </tr>
     <tr>
      <th class="details-column-left">Name</th>

      <td class="details-column-right">Vlad III the Impaler</td>
     </tr>
     <tr>
      <th class="details-column-left">Nationality</th>
      <td class="details-column-right">Romanian</td>
     </tr>
     <tr>

      <th class="details-column-left">Job</th>
      <td class="details-column-right">General</td>
     </tr>
     <tr>
      <th class="details-column-left">Extremely Long Header Text</th>
      <td class="details-column-right">Equally Long Value Text</td>
     </tr>

     <tr>
      <th class="details-column-left">Header</th>
      <td class="details-column-right">Value</td>
     </tr>
    </table>
   </div>
  </div>
 </body>
</html>

テーブル内のテキスト（つまり、ヘッダーセルテキストと標準セルテキスト）はデータベースに基づいてサーバー側で生成されるため、それらの値は非常に長くても短くてもかまいません（妥当な最大長）。上司はそれを次のように望んでいます：

  • 2つの列は、間に小さなスペースを置いて、中央で互いに揃える必要があります。
  • 各セルのすべてのテキストが同じ行に表示されるように、テーブルを拡張する必要があります。
  • タイトル（「詳細」）は、幅の比率に関係なく、常に2つの列の中央に配置する必要があります（通常は約60:40になります）。

私は1と2をうまくキャプチャできたと思います-このテーブルは、長いth/tdsを追加すると拡大し、削除すると同様に小さくなるはずです-しかし、私は3番に苦労しています。まったくそれをするために。を使用してみました<caption>が、それは役に立ちませんでした。列分割の上ではなく、テーブル全体の上に中央に配置されています。

だから、私はテーブルが「正しく」見えるようにするための助けをいただければ幸いです。予想される唯一のブラウザは、明らかにFirefox、バージョン2から3.5です（ただし、ほとんどの場合3.5を2にプッシュします）。重要な情報を見逃してしまったことをお詫び申し上げます。質問してください。追加します。

編集：

スクリーンショット（実際にはテーブルIRLにはなく、中央をマークするための赤い線）：

現在のテーブル、そして私が望むテーブル。

4

1 に答える 1

1

ソリューション

少し注意が必要ですが、これを行うことができます。

<html>
<head>
    <style type="text/css">

        /* Old CSS from web-guy before me */
    h5 { 
        font-size: 150%; 
        color: #878796;
        font-family: Arial,Helvetica,sans-serif;
    }

    .details-container {
        border-right : 1px;
        border-right-color:#F6F6F6;
        float:left;
    }

    .title-details h5 {
        margin: 0px;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    /* From here on it is mostly my CSS */
    table.center {
        margin-left:auto;
        margin-right:auto;
    }

    .details-column-left{
        text-align:right;
        padding-right:2px;
    }

    .details-column-right{
        text-align:left;
        padding-left:2px;
    }

    </style>
</head>
<body>
    <div class="details-container">

        <div class="details">
            <table class="center">
                <tr><td>&nbsp;</td><td><div style="width: 1px;overflow:visible;text-align: center;margin: -40px;"><h5>Details</h5></div></td><td>&nbsp;</td></tr>
                <tr>
                    <th class="details-column-left">Title</th>
                    <td width="1">&nbsp;</td>
                    <td class="details-column-right">Prince</td>
                </tr>
                <tr>
                    <th class="details-column-left">Name</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Vlad III the Impaler</td>
                </tr>
                <tr>
                    <th class="details-column-left">Nationality</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Romanian</td>
                </tr>
                <tr>

                    <th class="details-column-left">Job</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">General</td>
                </tr>
                <tr>
                    <th class="details-column-left">Extremely Long Header Text</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Equally Long Value Text</td>
                </tr>

                <tr>
                    <th class="details-column-left">Header</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Value</td>
                </tr>
            </table>
        </div>
    </div>
</body>

それは、本当にきれいで整頓されているわけではありませんが、うまくいくはずです

グリーツ

于 2010-08-23T09:57:38.110 に答える