Колонны сетки, имеющие разные размеры с разметкой сетки - PullRequest
Новая
       6

Колонны сетки, имеющие разные размеры с разметкой сетки

0 голосов
/ 28 сентября 2018

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

.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>

1 Ответ

0 голосов
/ 28 сентября 2018

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

.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>
...