html - CSS-Grid 卡住列滚动实现问题

Question

我正在尝试使用 CSS 网格实现一个包含卡住列的表格。 我所做的是制作一个包含左右子网格的主网格，而当 View 调整为更小的宽度时，右子网格具有溢出滚动属性。

.grid-container {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(var(--ncols),max-content);
  grid-auto-rows: 24px;
  overflow-x: auto;
}

.frozen-scroll {
  width: auto;
}

.frozen-static {
  background-color: #f1f1f1;
}

.grid-container-frozen {
  display: grid;
  width: auto;
  grid-template-columns: min-content auto;
  grid-template-rows: auto;
}

.item {
  background-color: white;
  padding: 2px;
  display: flex;
  align-items: center;
  font-size: 13px;
  border-left: 1px solid #8080804a;
  border-bottom: 1px solid #8080804a;
}

.spanned {
  grid-row-end: span var(--rowspan);
  grid-column-end: span var(--colspan);  
}

.table-header {
  grid-column: 1 / -1;
  background-image:linear-gradient(#D1DFF1, #8EA9CC);;
  color: #000;   
  justify-content: center;
}

.column-item {
  justify-content: center;
  background-image: linear-gradient(#f9f9f9, #e4e4e4);
}

<div class="grid-container-frozen">
  <div style="--ncols:1;" class="grid-container frozen-static">
    <div class="item table-header"><span></span></div>
    <div style="--rowspan:1;--colspan:1;" class="item column-item spanned"><span></span></div>
    <div class="item column-item"><span></span></div><div class="item"><span>TextTextTextTextTextText</span></div>
  </div>
<div style="--ncols:8;" class="grid-container frozen-scroll">
  <div class="item table-header"><span>Table Header</span></div>
      <div style="--rowspan:1;--colspan:4;" class="item column-item spanned"><span>Column0</span></div>
      <div style="--rowspan:1;--colspan:4;" class="item column-item spanned"><span>Column1</span></div>
      <div class="item column-item"><span>Type A</span></div>
      <div class="item column-item"><span>Type B</span></div>
      <div class="item column-item"><span>Type C</span></div>
      <div class="item column-item"><span>Type D</span></div>
      <div class="item column-item"><span>Type A</span></div>
      <div class="item column-item"><span>Type B</span></div>
      <div class="item column-item"><span>Type C</span></div>
      <div class="item column-item"><span>Type D</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
  </div>
</div>

我注意到的奇怪的事情:

1. 当父级宽度设置为 auto 时，右侧的子网格仍然跨越整个宽度。如果 grid-container-frozen 宽度属性更改为 max-content，我在调整大小时不再滚动，这是为什么？我想要一个卡住的左列，其余列具有滚动能力(如果大于 View )

2. 我在每个单元格上设置了左边框和底边框，但是最右边的边框不见了

Answer 1

不确定边界，但我认为您需要使用 minmax(max-content, auto)实现您所追求的滚动效果。

.grid-container {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(var(--ncols), minmax(max-content, auto));
  grid-auto-rows: 24px;
  overflow-x: auto;
}

.frozen-scroll {
  width: auto;
}

.frozen-static {
  background-color: #f1f1f1;
}

.grid-container-frozen {
  display: grid;
  width: auto;
  grid-template-columns: min-content auto;
  grid-template-rows: auto;
}

.item {
  background-color: white;
  padding: 2px;
  display: flex;
  align-items: center;
  font-size: 13px;
  border-left: 1px solid #8080804a;
  border-bottom: 1px solid #8080804a;
}

.spanned {
  grid-row-end: span var(--rowspan);
  grid-column-end: span var(--colspan);  
}

.table-header {
  grid-column: 1 / -1;
  background-image:linear-gradient(#D1DFF1, #8EA9CC);;
  color: #000;   
  justify-content: center;
}

.column-item {
  justify-content: center;
  background-image: linear-gradient(#f9f9f9, #e4e4e4);
}

<div class="grid-container-frozen">
  <div style="--ncols:1;" class="grid-container frozen-static">
    <div class="item table-header"><span></span></div>
    <div style="--rowspan:1;--colspan:1;" class="item column-item spanned"><span></span></div>
    <div class="item column-item"><span></span></div><div class="item"><span>TextTextTextTextTextText</span></div>
  </div>
<div style="--ncols:8;" class="grid-container frozen-scroll">
  <div class="item table-header"><span>Table Header</span></div>
      <div style="--rowspan:1;--colspan:4;" class="item column-item spanned"><span>Column0</span></div>
      <div style="--rowspan:1;--colspan:4;" class="item column-item spanned"><span>Column1</span></div>
      <div class="item column-item"><span>Type A</span></div>
      <div class="item column-item"><span>Type B</span></div>
      <div class="item column-item"><span>Type C</span></div>
      <div class="item column-item"><span>Type D</span></div>
      <div class="item column-item"><span>Type A</span></div>
      <div class="item column-item"><span>Type B</span></div>
      <div class="item column-item"><span>Type C</span></div>
      <div class="item column-item"><span>Type D</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
      <div class="item"><span>0</span></div>
  </div>
</div>