Таблица HTML, первый и последний столбцы фиксированной ширины и столбцы между динамическими, но равной шириной

Question

Таблица HTML, первый и последний столбцы фиксированной ширины и столбцы между динамическими, но равной шириной

Возможно ли иметь таблицу с шириной 100% (чтобы таблица соответствовала размеру экрана), где первый и последний столбцы имеют фиксированную ширину, а столбцы между ними принимают остальные, оба 50%.

Примерно:

+--------------------+--------------------------------------+--------------------------------------+------------+
| width:300px;       | with dynamic, equals next column     | width dynamic, equals prevous column | width:50px;|
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+

12

html css

задан afuzzyllama 26 June 2014 в 20:51

1 ответ

Другие вопросы по тегам:

html css

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

score 0 · Answer 1

Обратите внимание, что в HTML5/CSS3, можно использовать расположение сетки , чтобы иметь больше контроля над таблицами. Дело не в этом полезный для этого определенного примера, с пиксельными ширинами, где можно использовать table-layout:fixed в качестве в [1 110] ответ Bazzz , но полезно, если Вы хотите использовать что-то как min-content.

следующие работы из поля на Chrome и Firefox, но не в Safari:

table {
    width: 100%;
    display: grid;
    grid-template-columns: 300px 1fr 1fr 50px;

    /* Or, more usefully: */
    /* grid-template-columns: min-content 1fr 1fr min-content; */
}

td {
    display: block;
}

/* ignore <tr> when laying out the grid; just lay out the cells */
tr {
    display: contents;
}

/* browsers can inject <tbody> into the DOM even if it's not in the HTML */
tbody {
    display: contents;
}

(Примечание, хотя это свойство таблицы border-collapse не работает в этом расположении, таким образом, Вам, вероятно, придется играть с псевдоклассами CSS как :last-child, чтобы заставить Ваши границы вести себя способ, которым Вы хотите.)

В Safari это не работает - строки не повреждаются правильно. (Хотя это действительно работает, если Вы используете вложенный <div> элементы вместо <table> и применяете подобные стили.) Однако более простое расположение со всего одним динамическим 1fr столбец действительно работает в Safari:

table {
  display: grid;
  grid-template-columns: 300px 1fr 50px;
}

tbody {
  display: contents;
}

tr {
  display: contents;
}

td {
  border: 1px solid #c0c0c0;
}