Можно ли равномерно распределить столбцы таблицы, ширина которых равна ее содержанию?

Question

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

В моей таблице 3 или 4 столбца.Содержимое столбцов является динамическим, поэтому может расти с различными данными.В основном это один столбец, который будет содержать большие объемы данных.

Рассмотрим три следующих примера таблиц:

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th>Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th>Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

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

Однако я попытался создать тот же результат с помощью flexbox div вместо таблицы.Это сработало для равномерного распределения контента, однако я не смог создать черную рамку внизу заголовков таблицы.

Содержимое из таблицы примера должно распределяться равномерно, как это сделано на скриншоте.

Как мне распределить столбцы таблицы по ее содержимому?

FIDDLE

Answer 1

Вы пробовали width = "100%"?

<table width="100%">
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th width="200px">Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table width="100%">
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th width="200px">This is the title for<br> of blok 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table width="100%">
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th width="200px">Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

В зависимости от вашей скрипки:

Попробуйте добавить фиксированную ширину в конце last-child:

  &:last-child {
  padding-right: 0;
  width: 200px;

https://jsfiddle.net/qjx9wceh/6/

Answer 2

Установите для width таблицы значение 100%

Также установите для свойства layout таблицы значение fixed
Свойства:

макет таблицы:auto | исправлено | начальное | унаследовать;

Ссылка: https://www.w3schools.com/cssref/pr_tab_table-layout.asp

Ваша обновленная скрипка -> https://jsfiddle.net/qjx9wceh/4/

table
{
width:100%; 
table-layout:fixed; 
text-align:left;
}

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th>Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Title blok<br> of blok 1</th>
      <th>Title blok<br> of blok 2</th>
      <th>This is the title for<br> of blok 3</th>
      <th>Title blok<br> last block</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>20</td>
      <td>213</td>
      <td>€ 200.000</td>
      <td>XQABBBBQQVVVSS1234567 X</td>
    </tr>
  </tbody>
</table>

Answer 3

Установите следующее.

table {
  table-layout:fixed;

} 
table td {
   width:1%;
}