行内の要素を伸縮/正当化する方法は？

私は2つの行を持っていますが、行の幅を決める第1行にはいくつかのものがあります。 2番目の行には、2つの要素を並べて配置することを意図した要素のグループが2つあります。 2行目の要素のグループ間にスペースを均等にしたいと思います。彼らは細胞全体に伸びて、それをすべて取るべきです。助言してもらえますか、私は何をしますか？行内の要素を伸縮/正当化する方法は？

コードは次のようになります：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 

<body> 
<table border="1"> 
<tr> 
    <td width="200"> 
     text 
    </td> 
    <td width="200"> 
     text 
    </td> 
    <td width="200"> 
     text 
    </td> 
    <td width="200"> 
     text 
    </td> 
    <td width="200"> 
     text 
    </td> 
</tr> 
    <tr> 
<td colspan="5" align="justify"> 
    <!-- group1 --> 
    <select class="sorter" > 
    </select> 
    <select class="dir" > 
    </select> 

    <!-- group2 --> 
    <select class="sorter" > 
    </select> 
    <select class="dir" > 
    </select> 

    <!-- group3 --> 
    <select class="sorter" > 
    </select> 
    <select class="dir" > 
    </select> 

    <!-- group4 --> 
    <select class="sorter" > 
    </select> 
    <select class="dir" > 
    </select> 
</td> 
</tr> 
</table> 
</body> 
</html>

編集：これまでのところ、私はこれをしなかったし、ほとんどそれを得ました。しかし、最初のグループと最後のグループの間のスペースは均一ではありません。何か案は？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <style> 
       table.ball {empty-cells: show} 
       table.ball td {text-align:center;border:1px solid blue;} 
       table.ball td:nth-last-of-type(1) {text-align:right; } 
       table.ball td:nth-of-type(1) {text-align:left;} 
       select.sorter {width:180px} 
     </style> 
    </head> 
<body> 
<table > 
<tr> 
    <td width="200"> 
     text 
    </td> 
    <td width="200"> 
     text 
    </td> 
    <td width="200"> 
     text 
    </td> 
    <td width="200"> 
     text 
    </td> 
    <td width="200"> 
     text 
    </td> 
</tr> 
    <tr> 
<td colspan="5" align="middle" > 
    <table class="ball" width="100%" > 
     <colgroup> 

     </colgroup> 
     <tr> 
      <td> 
       <!-- group1 --> 
       <select class="sorter" > 
       </select> 
       <select class="dir" > 
       </select> 
      </td> 

      <td> 
       <!-- group1 --> 
       <select class="sorter" > 
       </select> 
       <select class="dir" > 
       </select> 
      </td> 

      <td> 
       <!-- group1 --> 
       <select class="sorter" > 
       </select> 
       <select class="dir" > 
       </select> 
      </td> 

      <td> 
       <!-- group1 --> 
       <select class="sorter" > 
       </select> 
       <select class="dir" > 
       </select> 
      </td> 
     </tr> 
    </table> 
</td> 
</tr> 
</table> 
</body> 
</html>

出典

2012-03-10 Anonymous

this exampleは、必要なものに近いです。私はハードコーディングされた情報のいくつかを削除し、それをCSSに入れました。

table {table-layout: fixed; border-collapse: collapse;} 
td {width: 200px; border: 1px solid black;} 
.sorter, .dir {width: 11.5%;} 
td[colspan="5"] {text-align: center;}

11.5％の幅は、数学的に12.5％に近づけるべきであるように思われたにも関わらず、うまく動作するように見えますが、select要素は、その右に余分なスペースを持ついくつかのファンキーなものをやっていました。しかし、text-align: centerはそれらを均一に間隔を空けて保ちます。

出典

2012-03-10 14:28:44 ScottS

マークアップを確認して、2番目の行のグループごとにclass = "group"のdivを追加しました。テーブルの中にテーブルを追加する代わりに、このようなdivを追加することができます。

<tr> 
     <td colspan="5" align="justify"> 
      <!-- group1 --> 
      <div class="group"> 
      <select class="sorter" > 
      </select> 
      <select class="dir" > 
      </select> 
      </div> 
      <div class="group"> 
      <!-- group2 --> 
      <select class="sorter" > 
      </select> 
      <select class="dir" > 
      </select> 
     </div> 
     <div class="group"> 
      <!-- group3 --> 
      <select class="sorter" > 
      </select> 
      <select class="dir" > 
      </select> 
     </div> 
     <div class="group"> 
      <!-- group4 --> 
      <select class="sorter" > 
      </select> 
      <select class="dir" > 
      </select> 
      </div> 
     </td> 
     </tr>

とCSSで：

.group{ 
width:25%; 
}

出典

2012-03-10 15:54:48 Abhidev

ここで更新されたコードである - ここでフィドルhttp://jsfiddle.net/n2zEv/embedded/result/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <style> 
       table.ball {empty-cells: show} 
       table.ball td {text-align:center;/*border:1px solid blue;*/} 
       table.ball td:nth-last-of-type(1) {text-align:right; } 
       table.ball td:nth-of-type(1) {text-align:left;} 
       select.sorter, select.dir {width:48.5%;} 
     </style> 
    </head> 
<body> 
<table border="1" width="100%" cellpadding="0" cellspacing="0"> 
<tr> 
    <td width="200">text</td> 
    <td width="200">text</td> 
    <td width="200">text</td> 
    <td width="200">text</td> 
    <td width="200">text</td> 
</tr> 
    <tr> 
<td colspan="5" align="middle" > 
    <table class="ball" width="100%" cellpadding="0" cellspacing="0"> 
     <colgroup></colgroup> 
     <tr> 
      <td> 
       <!-- group1 --> 
       <select class="sorter"></select> 
       <select class="dir"></select> 
      </td> 
      <td> 
       <!-- group2 --> 
       <select class="sorter"></select> 
       <select class="dir"></select> 
      </td> 
      <td> 
       <!-- group3 --> 
       <select class="sorter"></select> 
       <select class="dir"></select> 
      </td> 
      <td> 
       <!-- group4 --> 
       <select class="sorter"></select> 
       <select class="dir"></select> 
      </td> 
     </tr> 
    </table> 
</td> 
</tr> 
</table> 
</body> 
</html>

があるが、

出典

2012-03-10 18:04:29 w3uiguru

行内の要素を伸縮/正当化する方法は？

答えて

関連する問題