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

Ответ 1

Как насчет использования jQuery для этого и вызова функции javascript после создания таблицы или какого-либо другого события (например, щелчка)?

Смотрите здесь (для этого я создал jsfiddle playground)

Что он делает, так это то, что он проверяет ширину фиксированных элементов (ширина всей таблицы, первая и последняя ячейка). Затем он вычисляет и присваивает ширину остальным ячейкам, которые должны иметь оставшуюся ширину, разделенную между ними (в зависимости от того, сколько их осталось и сколько осталось места). Конечно, это просто быстрый пример возможного решения. Он нуждается в полировке (проверка нулевых объектов, если оставшаяся ширина больше 0,...)

Ответ 2

Попробуйте следующее:

Как видите, два центральных столбца остаются равными по размеру, из-за table-layout:fixed, даже когда контент имеет разную длину. Попробуйте добавить больше и меньше содержимого к двум центральным столбцам.

JSFiddle: http://jsfiddle.net/RtXSh/

CSS

table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed; 
}

td {
    border: 1px solid #333;
}

HTML

  <table>
    <tr>
      <td style="width:300px;">
        test
      </td>
      <td>
        test test tes test test
      </td>
      <td>
        test
      </td>
      <td style="width:50px;">
        test
      </td>
    </tr>
  </table>

Ответ 3

Попробуйте использовать псевдо-элемент first-child и last-child

Если я не ошибаюсь, остальные столбцы будут выравниваться одинаково. Возможно, вам понадобится использовать важное выражение за шириной первого и последнего ребенка.

table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
td:first-child{ width: 100px; }
td:last-child{ width: 100px; }

<table>
    <tr>
      <td>100px</td>
      <td>some text</td>
      <td>some text</td>
      <td>100px</td>
    </tr>
</table>

Ответ 4

По-моему, простой, приятный и простой способ - не использовать вместе pxx и%. Если вы используете ширину таблицы 100%, тогда также определяйте ширину первого и последнего столбцов в%. Если вас это интересует, вот как вы можете это сделать:

CSS

.mytable {
    width:100%;
    border: 1px solid green;
}

.left{
    width:30%;
    border-right:1px dashed blue;
}

.mid1{
   width:30%;
   border-right:1px dashed blue;

}

.mid2{
  width:30%;
   border-right:1px dashed blue;

}

.right{
    width: 10%;
    border-left:1px dashed blue;
}

HTML:

<table class="mytable">
    <tr>
        <td class="left">Left Column, 30%</td>
        <td class="mid1">Mid 1, 30% </td>
        <td class="mid2">Mid 2, 30% </td>
        <td class="right">Right, 10%</td>
    </tr>
</table>

Ответ 5

Это можно обработать, добавив в элемент таблицы стиль table-layout: fixed и просто не указывая значения ширины для столбцов, которые вы хотите равномерно разделить ширину, оставшуюся после фиксированных столбцов были учтены.

Кроме того, использование комбинаций <colgroup> может обеспечить надежные сценарии переменной ширины.

Я создал пример в JSFiddle: https://jsfiddle.net/3bgsfnuL/1/

<div style="position:relative; height:500px; width:100%;">
<table style="height:100%; width:100%; table-layout:fixed; text-align:center; border-collapse:collapse;">
  <colgroup colspan="1" style="width:200px"></colgroup>
  <colgroup colspan="3">
    <col/>
    <col style="width:30px"/>
    <col/>
  </colgroup>
  <colgroup colspan="1" style="width:200px"></colgroup>
  <tbody>
    <tr>
      <td style="background-color:silver;">left fixed</td>
      <td style="border-right:1px solid black;">col 1</td>
      <td style="background-color:red; color:white; border:1px solid black;">col 2</td>
      <td style="border-left:1px solid black;">col 3</td>
      <td style="background-color:silver;">right fixed</td>
    </tr>
  </tbody>
</table>
</div>

Ответ 6

Никто не упомянул об этом здесь <th> trick:

table{ table-layout: fixed; width: 100%; }
th:first-child{ width: 300px; }

<table>
  <thead>
    <tr>
      <th>yourfirst300pxcolumn</th>
      <th>fixedwidth</th>
      <th>fixedwidth also</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>300</td><td>something</td><td>something else</td></tr>
  </tbody>
</table>

Ответ 7

Обратите внимание, что в HTML5/CSS3 вы можете использовать сетку, чтобы лучше контролировать свои таблицы. Следующее работает из коробки в Chrome и Firefox, но не в Safari:

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

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 not in the HTML */
tbody {
    display: contents;
}

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

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

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

tbody {
  display: contents;
}

tr {
  display: contents;
}

td {
  border: 1px solid #c0c0c0;
}