html table - установить столбец так, чтобы он занимал оставшееся пространство и ширину не менее 300 пикселей

Question

Как сделать столбец посередине HTML-таблицы и заполнить его оставшимся пространством при минимальной ширине 300 пикселей?

Вот JSfiddle, показывающий, что яm пытаюсь сделать.

HTML:

<table>
  <tr>
    <td class="fixed-width">A set width column</td>
    <td class="remaining-width-or-300-pixels">
    A column with long content, to take the remaining space, and at least 300 pixels. It's OK if it has to trucate.
    </td>
    <td class="fixed-width">A set width column</td>
  </tr>
</table>

CSS:

table {
  display: table;
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
  color: white;
}

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
  overflow: hidden;
  min-width: 300px;
}

Как вы можете видеть, когда вы настраиваете ширину панели,min-width: 300px; полностью игнорируется.

Любой обходной путь css ( не javascript ), который я могу использовать, чтобы получить эту работу?

Редактировать: такжелюбое решение, использующее элементы div вместо table, tr и td, не будет работать, я использую библиотеку, которая требует использования элемента table.

Answer 1

Я думаю, что проблема заключается в макет таблицы: исправлено;

Согласно здесь , фиксированное значение будет устанавливать алгоритм фиксированной компоновки таблицы.Ширина таблицы и столбца задается шириной таблицы и столбца или шириной первого ряда ячеек.Может быть, почему min-ширина не работает для тд.

table {
  display: table;
  width: 100%;
  /* table-layout: fixed; */
  white-space: nowrap;
  color: white;
}

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
  min-width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
  overflow: hidden;
  min-width: 300px;
 
}

<table>
  <tr>
    <td class="fixed-width">A set width column</td>
    <td class="remaining-width-or-300-pixels">
    A column 
    </td>
    <td class="fixed-width">A set width column</td>
  </tr>
</table>

Answer 2

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

Рабочий jsfiddle

HTML:

<table>
  <tr>
    <td class="fixed-width">A set width column</td>
    <td class="remaining-width-or-300-pixels">
    A column with long content, to take the remaining space, and at least 300 pixels. It's OK if it has to trucate.
    </td>
    <td class="fixed-width">A set width column</td>
  </tr>
</table>

CSS

table {
  display: table;
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
  color: white;
  min-width: 700px;
}

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
}

Answer 3

Используйте text-overflow:ellipsis для усечения текста.

table {
      display: table;
      width: 100%;
      table-layout: fixed;
      white-space: nowrap;
      color: white;
    }

table td {
  overflow: hidden;
}

td.fixed-width {
  background: blue;
  width: 200px;
}

td.remaining-width-or-300-pixels {
  background: red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 300px;
}

<table>
  <tr>
    <td class="fixed-width">A set width column</td>
    <td class="remaining-width-or-300-pixels">
    A column with long content, to take the remaining space, and at least 300 pixels. It's OK if it has to trucate.
    </td>
    <td class="fixed-width">A set width column</td>
  </tr>
</table>