web-dev-qa-db-ja.com

テーブルでのcalc（）の使用

固定幅tdsと可変幅tdsのテーブルを取得しようとしています。

CSS calc()関数を使用していますが、どういうわけか、テーブルで%を使用できないようです。

これが私がこれまでに持っているものです。

<table border="0" style="width:100%;border-collapse:collapse;">
    <tr style="width:100%">
        <td style="width:30px;">1</td> <!--Fixed width-->
        <td style="width: calc( (100% - 230px) / 100 * 40);">Title</td> <!--Width should be 40% of the remaining space-->
        <td style="width: calc( (100% - 230px) / 100 * 40);">Interpret</td> <!--Width should be 40% of the remaining space-->
        <td style="width: calc( (100% - 230px) / 100 * 20);">Album</td> <!--Width should be 20% of the remaining space-->
        <td style="width:80px;">Year</td><!--Fixed width-->
        <td style="width:180px;">YouTube</td><!--Fixed width-->
    </tr>
</table>

私の見方では、うまくいくはずですが、そうではありません。

誰かがこれを解決する方法を知っていますか？それとも、どうすれば目標を達成できるかについて他の提案がありますか？

csshtml-tablefixed-widthcss-calc
16
Marc Becker

テーブルには、デフォルトでセルの内容に応じてスペースが分散されるため、列のスペースの分散に関して難しいルールがあります。 Calc（atm）はそれでは機能しません。

ただし、できることは、tableの-​​ table-layout 属性を設定して、子td要素に宣言した正確な幅を取得させることです。これを機能させるには、テーブルにwidth（100%が機能する）も必要です。

table{
   table-layout:fixed; /* this keeps your columns with at the defined width */
   width: 100%;        /* a width must be specified */

   display: table;     /* required for table-layout to be used 
                          (since this is the default value it is normally not necessary;
                          just included for completeness) */
}

次に、残りの列に単純なパーセンテージを使用します。

td.title, td.interpret{
    width:40%;
}
td.album{
    width:20%;
}

固定幅の列のスペースを使い切った後、残りのスペースは相対的な幅で列に分配されます。

これを機能させるには、デフォルトの表示タイプdisplay: tableが必要です（たとえば、display: blockとは対照的です）。ただし、これは、テーブルにheight（min-heightおよびmax-heightを含む）を使用できなくなったことを意味します。

変更した例を参照してください。

28
Christoph