Блог

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

Как я могу сделать так, чтобы ширина других ячеек составляла процент от оставшейся ширины?

#html #css

Вопрос:

С таблицей, которая имеет автоматические поля и ячейки с заданной шириной, как я могу сделать так, чтобы ширина других ячеек составляла процент от оставшейся ширины?

 div {
  padding: 10px;
  background: purple;
}

section {
  background: white;
  width: calc(50% - 60px);
  display: inline;
}

section:first-child {
  width: 60px;
} 
 <div>
  <section>cell 1</section>
  <section>cell 2</section>
  <section>cell 3</section>
</div>

вдохновленный вопросом от Кайдзенцируса

Ответ №1:

Это идеальная работа для grid . Используйте display: grid; и grid-template-column: 60px 1fr 1fr; (1fr означает, что столбец 2-го и 3-го имеет 1 долю от оставшегося размера таблицы).

Бонус: используйте разрыв сетки для обработки разницы между элементами.

 div {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: purple;
}

section {
  background: white;
  display: grid;
  place-items: center;
} 
 <div>
  <section>cell 1</section>
  <section>cell 2</section>
  <section>cell 3</section>
</div>

вдохновленный ответом от Routine_Potential_59

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

1. пока что хороший код, но вы могли бы оптимизировать свою хакерскую симуляцию границ. Для имитации коллапса границ в сетке вы можете использовать box-shadow : удалите background-color как с родительских, так и с карточек. и добавьте section { box-shadow:0 0 0 10px purple; }

2. Ну, это не ложь, но немного выходит за рамки.

Метки: ,