防止宽度变化应用位置：固定

Question

很难在标题中详尽地描述我的问题，所以我会尽量在描述中更清楚。 我使用<div> 构建一个表并应用CSS 属性display: table 等。故意避免语义<table> 方法。 一切正常，现在我正在尝试使用position: fixed 实现固定标头。结果是：

显然，应用于单元格其余部分的display: table-cell 会引发这种不受欢迎的行为。单元格会自动调整大小以适应新内容，并仅遵循我在 CSS 文件中应用的 min-width: 100px 规则。

这里是工作笔的链接：https://codepen.io/l_core/pen/ZLQEjq

有没有办法通过纯 CSS 方法实现标题和“正文”单元格之间的完美对齐？我可以尝试用 JS 重新计算宽度，但我确信有一种优雅的方法可以实现这一点，我想请教这里的专家如何做到这一点。

代码下方：

HTML

    <!-- Row Container -->
    <div class="row-container" id="row1">

      <!-- Header cell container -->
      <div class="cell cell-header" id="cell1">

        <!-- Cell content container -->
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell2">
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell3">
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell4">
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell5">
        <div class="cell-content">
          <span>Cell</span>
        </div>
    </div>

CSS

#row1 {
  position: fixed;
}

请查看我上面发布的钢笔以获取完整代码。我不确定将其全文发布是个好主意。

Answer 1

固定元素超出了正常的 html 流程。因此，您的表格标题不再是表格的一部分。 因此，它们的行为是独立的。

您可以为所有单元格设置一个常量（或使用 JS 动态计算）宽度，而不是 min-width。

Answer 2

我相信如果你使用 Flex 作为主容器。 它将解决您的宽度问题。

1. 将主容器设为弹性容器。
2. 在 Main-Container 内，将 flex-direction 设为“列”。

关于 Flex 的更多信息，您可以搜索：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/