Блог

Главная - Вопросы по программированию - Гибкий заголовок таблицы, учитывающий ширину содержимого

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

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

В настоящее время все столбцы имеют одинаковую ширину. Я бы хотел, чтобы первый столбец с содержимым «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>

Комментарии:

1. flex-grow: 0; к первому столбцу?

Ответ №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>

Ответ №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>

введите описание изображения здесь