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

Question

Я пытаюсь получить таблицу с фиксированной шириной 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>

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

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

Answer 1

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

Что вы можете сделать, однако, это установить table-layout атрибут для table заставить ребенка 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) для таблицы.

Смотрите ваш модифицированный пример.

Answer 2

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

-webkit-calc для веб-набора.

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

В любом случае, ваша функция -calc- будет игнорироваться. имея 3 тд это будет 40% от оставшейся ширины? Это 120% в общей сложности. Это таблица. Ширина родителя всегда будет иметь приоритет.

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

Итог: не используйте calc с таблицей.