Question

我正在尝试使用网格布局构建可调整大小的表（即：列和行必须可调整大小）。我想根据最大单元格内容自动调整初始列的大小，就像 traditional 表那样。我尝试了不同的方法来设置 grid-template-columns 参数，但是它们都无法正常工作：在某些情况下，同一列的单元格在其他单元格中的大小不同 all 列的大小相同。也许 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>

Answer 1

我不确定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>

网格布局具有不同大小的网格列

1 个答案: