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

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

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

Как я понимаю, это должно работать, но это не так.

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

12 голосов | спросил Marc Becker 8 AMpMon, 08 Apr 2013 11:14:04 +040014Monday 2013, 11:14:04

2 ответа


0

Таблицы имеют сложные правила распределения пространства столбцов, поскольку по умолчанию они распределяют пространство в зависимости от содержимого ячеек. 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) для таблицы.

См. ваш измененный пример.

ответил Christoph 8 PMpMon, 08 Apr 2013 12:06:13 +040006Monday 2013, 12:06:13
0

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

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

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

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

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

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

ответил He Hui 8 AMpMon, 08 Apr 2013 11:20:11 +040020Monday 2013, 11:20:11

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132