13

列の数が変更される可能性のあるテーブルがあります（1から10）。ただし、1つの列は常に固定幅のままにして、余分なスペースがないか、折り返されないようにする必要があります（テーブルの行を追加または削除します）。

テーブルの幅は合計800ピクセル以下にする必要があります。送信ボタンを、右側にフロートさせたいのですが。

変化するテーブルの列幅をパーセンテージで設定し、1つの静的列を固定ピクセル幅として設定する方法はありますか？それとも問題が発生しますか？私はいくつかの異なるアプローチを試しましたが、すべてが最適ではないようです。これを行うためのエレガントな方法はありますか？参考のために写真を添付し​​ました：http：//bayimg.com/BAlLLaaDP。

HTML：

<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>
4

1 に答える 1

6

すべての行の合計幅が100％以下の場合（コンテンツに合わせて行またはテーブルがスケーリングされる場合）、1つのテーブルにピクセル単位の幅とパーセンテージの行が存在する可能性があります。幅の目的でのみ使用している場合は、要素
に幅を追加できます。幅が収まらないように縮小できるように、少なくとも1つの列を幅なしで残すことをお勧めします。PSなぜ要素が必要なの かわかりません。thcol
width: 100%;td

于 2012-01-17T23:16:34.683 に答える