Использование calc() с таблицами

Я пытаюсь получить таблицу с фиксированной шириной td и переменной шириной td s.

Im использует функцию 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>

Как я вижу, он должен работать, но это не так.

Кто-нибудь знает, как это решить? Или может быть другое предложение, как я мог бы достичь своей цели?

Ответ 1

В таблицах есть сложные правила о распределении пространства столбцов, поскольку они по умолчанию распределяют пространство, зависящее от содержимого ячеек. Calc (atm) просто не работает с этим.

Однако вы можете установить атрибут table-layout для table, чтобы заставить дочерние элементы td получите указанную вами точную ширину. Для этого вам также понадобится width (100% works) в таблице.

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) для таблицы.

См. измененный пример.

Ответ 2

Calc - общая функция.

-webkit-calc для webkit.

Добавьте их в соответствии с используемым браузером.

Независимо от того, ваша -каска-функция будет проигнорирована. имея 3 td, что составит 40% от оставшейся ширины? Это всего 120%. Это стол. Родительская ширина всегда будет иметь приоритет.

Однако, если у вас TD в 5%, то общая ширина будет меньше, чем у таблицы, поэтому она также будет проигнорирована.

Нижняя строка: не используйте calc с таблицей.