2012-01-17 3 views
8

私は、列の数が1から10に変わるかもしれないテーブルを持っていますが、余分なスペースがないように常に固定幅に留まるべき1つの列を除いて、またはラップしません(それはテーブルの行を追加または削除するために使用されます)。htmlテーブルのヘッダーに幅とピクセル幅を混在させることはできますか?

テーブルのサイズは、合計が800pxより大きくならないようにしてください。送信ボタンを右側に浮かべたいと思います。

パーセントで変更されているテーブルの列幅と固定ピクセル幅としての1つの静的列を設定する方法はありますか?それは問題を引き起こすか?私は数多くのアプローチを試みましたが、すべて最適ではないようです。これを行うエレガントな方法はありますか?参考のために画像を添付しました:http://bayimg.com/BAlLLaaDP

HTML:すべての行の合計幅が100%以上でない場合より多くの行またはテーブルをにスケーリングされる場合

<html> 
    <head> 
    <style> 
     #container { 
     width: 800px; 
     } 
     #table_container { 
     padding:5px; 
     } 
     #table_container table { 
     width: 85%; 
     } 
     .action { 
     } 
     col { 
     width:29%; 
     } 
     table { 
     width:650px; 
     table-layout: fixed; 
     float: left; 
     } 
    </style> 
    </head> 

<body> 
<div id="container" class="clearfix"> 

    <form> 
      <table class="" border=1> 
       <colgroup> 
        <col > 
        <col> 
        <col> 
        <col class="action"> 
       </colgroup> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Email </th> 
       <th></th> 
       <tr> 
        <td>content 1</td> 
        <td>content 2</td> 
        <td>content 3 </td> 
        <td><a href="">delete row</a> 
       </tr> 
       <tr> 
        <td>content 1</td> 
        <td>content 2</td> 
        <td>content 3 </td> 
        <td><a href="">delete row</a> 
       </tr> 
      </table> 
     <div class="mult_answer"> 
      <button class="button orange">Submit Answer</button> 
     </div> 
     </form> 

</div> 

</body> 
</html> 

答えて

5

(一つのテーブル内の画素との割合に幅を持つ行が存在し得ますフィットコンテンツ)。
colを幅の目的でのみ使用している場合は、th要素に幅を追加できます。幅のない少なくとも1つの列を残して、収縮するように縮小する方が良いです。
P.私はなぜあなたがwidth: 100%;td要素のために必要なのか分からない。

+0

ありがとうございました。私はtd要素の幅を削除しましたが、そこには存在しないはずです。 – David

関連する問題