移除可滚动DIV表格的inline-block属性且保留滚动条

直接改用Flexbox布局可彻底解决inline-block的空白问题，同时保留动态宽度和滚动条，无需任何hack：

修改后的CSS #

.Main {
  border: 1px solid black;
  width: 50%;
  margin: 50px auto;
  overflow: auto;
}

.Row {
  display: flex; /* 替换white-space:nowrap，实现横向排列 */
}

.Cell {
  border: 1px solid green;
  width: 250px;
  flex-shrink: 0; /* 强制保持固定宽度，避免被容器压缩 */
  /* 移除display:inline-block */
}

修改后的HTML（结构无需调整） #

<DIV class="Main">
  <DIV class="Row">
    <DIV class="Cell">BLANK</DIV>
    <DIV class="Cell">Move 1</DIV>
    <DIV class="Cell">Move 2</DIV>
    <DIV class="Cell">Move 3</DIV>
    <DIV class="Cell">Move 4</DIV>
  </DIV>
  <DIV class="Row">
    <DIV class="Cell">BLANK</DIV>
    <DIV class="Cell">Move 1</DIV>
    <DIV class="Cell">Move 2</DIV>
    <DIV class="Cell">Move 3</DIV>
    <DIV class="Cell">Move 4</DIV>
  </DIV>
</DIV>

核心逻辑 #

• Row设置为display:flex后，子元素自动横向排列，完全消除inline-block带来的空白间隙
• flex-shrink:0确保每个Cell严格保持250px宽度，不会因容器宽度不足被压缩
• Main的overflow:auto会在内容总宽度超过容器时自动显示滚动条，完美保留动态宽度特性

要实现左侧静态列固定、右侧可滚动且MainTest宽度100%的效果，需调整Flex容器的嵌套和溢出规则：

修改后的CSS #

.Container {
  display: flex;
  border: 1px solid black;
  width: 85%;
  margin: 0px auto;
}

.Child:first-child {
  width: 250px; /* 固定静态列宽度 */
  flex-shrink: 0; /* 防止被压缩 */
  border: 1px solid green;
}

.Child:last-child {
  flex: 1; /* 占据容器剩余宽度 */
  border: 1px solid green;
  overflow: hidden; /* 隐藏内部溢出，触发MainTest的滚动条 */
}

.MainTest {
  border: 1px solid black;
  width: 100%; /* 设置为100%占满父容器 */
  overflow: auto;
}

.RowTest {
  display: flex;
}

.CellTest {
  border: 1px solid green;
  width: 250px;
  padding: 5px 0px;
  flex-shrink: 0; /* 保持固定宽度 */
  text-align: center;
  /* 移除display:inline-block */
}

修改后的HTML（结构无需调整） #

<DIV class="Container">
  <DIV class="Child">Static Column (Should be 250px)</DIV>
  <DIV class="Child">
    <DIV class="MainTest">
      <DIV class="RowTest">
        <DIV class="CellTest">Heading 1</DIV>
        <DIV class="CellTest">Heading 2</DIV>
        <DIV class="CellTest">Heading 3</DIV>
        <DIV class="CellTest">Heading 4</DIV>
        <DIV class="CellTest">Heading 5</DIV>
      </DIV>
      <DIV class="RowTest">
        <DIV class="CellTest">Entry 1</DIV>
        <DIV class="CellTest">Entry 2</DIV>
        <DIV class="CellTest">Entry 3</DIV>
        <DIV class="CellTest">Entry 4</DIV>
        <DIV class="CellTest">Entry 5</DIV>
      </DIV>
    </DIV>
  </DIV>
</DIV>

核心逻辑 #

• 静态列通过width:250px+flex-shrink:0固定宽度，不会随容器宽度变化
• 右侧容器设置flex:1占据剩余空间，overflow:hidden确保内部内容溢出时不会撑破容器，转而触发MainTest的滚动条
• RowTest用flex布局，CellTest通过flex-shrink:0保持固定宽度，彻底规避inline-block的空白问题

内容的提问来源于stack exchange，提问作者Wammy