Заголовок таблицы Flex, учитывающий ширину содержимого

Question

В настоящее время все столбцы имеют одинаковую ширину.Я хотел бы, чтобы первый столбец с содержимым «X» уменьшался до ширины содержимого внутри него, но без жесткого кодирования его ширины.

Пустой столбец заголовка также должен учитывать ширину содержимого.

.table__row{
  display: flex;
}

.table__column {
  border: 1px solid blue;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 12px;
  overflow: hidden;
  text-align: center;
}

<div class="table">
  
  <div class="table__row -header">
    <div class="table__column"></div>
    <div class="table__column">Day</div>
    <div class="table__column">Time</div>
  </div>
  
  <div class="table__row">
    <div class="table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Monday</div>
    <div class="table__column">12:00</div>
  </div>
  
  <div class="table__row">
    <div class="table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Tuesday</div>
    <div class="table__column">13:20</div>
  </div>
  
  
</div>

Answer 1

Это должно работать.В основном вам нужно установить flex-grow на 0 для элементов в этом «столбце».

.table__row{
  display: flex;
}

.table__column {
  border: 1px solid blue;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 12px;
  overflow: hidden;
  text-align: center;
}

.shrink {
  flex-grow: 0;
}

<div class="table">
  
  <div class="table__row -header">
    <div class="shrink table__column"></div>
    <div class="table__column">Day</div>
    <div class="table__column">Time</div>
  </div>
  
  <div class="table__row">
    <div class="shrink table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Monday</div>
    <div class="table__column">12:00</div>
  </div>
  
  <div class="table__row">
    <div class="shrink table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Tuesday</div>
    <div class="table__column">13:20</div>
  </div>
  
  
</div>

Answer 2

Применить эту CSS

.-header .table__column:first-child{
  display: contents;
}

<div class="table">

  <div class="table__row -header">
    <div class=" table__column"></div>
    <div class="table__column">Day</div>
    <div class="table__column">Time</div>
  </div>

  <div class="table__row">
    <div class="shrink table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Monday</div>
    <div class="table__column">12:00</div>
  </div>

  <div class="table__row">
    <div class="shrink table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Tuesday</div>
    <div class="table__column">13:20</div>
  </div>


</div>