Столбцы сетки разного размера с разметкой сетки

Я пытаюсь создать таблицу с изменяемым размером (например: столбцы и строки должны иметь изменяемый размер), используя макет сетки. Я хотел бы, чтобы начальные размеры столбцов автоматически настраивались в зависимости от максимального содержимого ячейки, как это происходит с таблицами традиционный. Я пробовал разные способы установки параметра сетка-шаблон-столбцы, но ни один из них не работает должным образом: в некоторых случаях ячейки одних и тех же столбцов имеют разный размер в других все столбцы имеют одинаковый размер. Возможно, сетка-шаблон-столбцы - не единственный параметр, который следует учитывать. Может ли кто-нибудь дать мне какое-либо предложение по решению? Вот упрощенный пример моей таблицы:

.resizable_table {
	display:inline-grid;
	grid-template-columns:auto;
}
.thead {
	background-color:#e6e6ff;
	border-bottom:1px solid blue;
}

.resizable_row {
	display:inline-grid;
	grid-template-columns:auto 1px auto 1px auto 1px auto 1px ; 
	min-height:30px;
	justify-content:start;
}
			
.resizable_cell {
	min-width:100px;
}
.hfiller{
	background-color:blue;
	cursor:col-resize;
}
.vfiller {
	background-color:blue;
	height:1px;
	cursor:row-resize;
}

<div id = "table2" class = "resizable_table">
	<div class = "thead">
		<div class = "resizable_row">
			<div class = "resizable_cell">title</div><div class = "hfiller"></div>
			<div class = "resizable_cell">author</div><div class = "hfiller"></div>
			<div class = "resizable_cell">year</div><div class = "hfiller"></div>
			<div class = "resizable_cell">price</div><div class = "hfiller"></div>
		</div>
	</div>
	<div class = "tbody">
		<div class = "resizable_row">
			<div class = "resizable_cell">La mirabolante avventura di John Lempriere, erudito nel secolo dei lumi</div><div class = "hfiller"></div>
			<div class = "resizable_cell">Lawrence Norfolk</div><div class = "hfiller"></div>
			<div class = "resizable_cell">1996</div><div class = "hfiller"></div>
			<div class = "resizable_cell">30.00</div><div class = "hfiller"></div>
		</div>
		<div class = "vfiller"></div>
		<div class = "resizable_row">
			<div class = "resizable_cell">The Green Mile</div><div class = "hfiller"></div>
			<div class = "resizable_cell">Stephen King</div><div class = "hfiller"></div>
			<div class = "resizable_cell">1996</div><div class = "hfiller"></div>
			<div class = "resizable_cell">30.00</div><div class = "hfiller"></div>
		</div>
		<div class = "vfiller"></div>
	</div>
</div>

css css-grid resizable

28.09.2018 17:52

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

Я не уверен, для чего служат блоки filler, но что-то вроде этого кажется проще.

.resizable_table {
  display: inline-grid;
  grid-template-columns: auto;
}

.thead {
  background-color: #e6e6ff;
  border-bottom: 1px solid blue;
}

.resizable_row {
  display: inline-grid;
  grid-template-columns: repeat(4, min-content);
  min-height: 30px;
  justify-content: start;
}

.resizable_cell {
  min-width: 100px;
}

.hfiller {
  background-color: blue;
  cursor: col-resize;
}

.vfiller {
  background-color: blue;
  height: 1px;
  cursor: row-resize;
}

<div id = "table2" class = "resizable_table">
  <div class = "thead">
    <div class = "resizable_row">
      <div class = "resizable_cell">title</div>
      <div class = "resizable_cell">author</div>
      <div class = "resizable_cell">year</div>
      <div class = "resizable_cell">price</div>
    </div>
  </div>
  <div class = "tbody">
    <div class = "resizable_row">
      <div class = "resizable_cell">La mirabolante avventura di John Lempriere, erudito nel secolo dei lumi</div>
      <div class = "resizable_cell">Lawrence Norfolk</div>
      <div class = "resizable_cell">1996</div>
      <div class = "resizable_cell">30.00</div>
    </div>
    <div class = "resizable_row">
      <div class = "resizable_cell">The Green Mile</div>
      <div class = "resizable_cell">Stephen King</div>
      <div class = "resizable_cell">1996</div>
      <div class = "resizable_cell">30.00</div>
    </div>
  </div>
</div>

Спасибо @Paulie_D, но работает некорректно: в этом случае все столбцы имеют одинаковую ширину; вместо этого мне нужен первый столбец, больший, чем другие (потому что первая ячейка содержимого первой строки очень большая), как это происходит с тегами таблицы.

— 28.09.2018 18:35

28.09.2018 18:13