防止宽度变化应用 position:fixed

Question

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

显然，应用于单元格其余部分的 display: table-cell 会引发这种不希望出现的行为。这些单元格正在 auto-resizing 适应新内容并仅遵循我在 CSS 文件中应用的 min-width: 100px 规则。

这里是一个link工作笔：https://codepen.io/l_core/pen/ZLQEjq

有没有一种方法可以通过纯粹的 CSS 方法实现 header 和 "body" 单元格之间的完美对齐？我可以尝试使用 JS re-calculate 宽度，但我确信有一种优雅的方法可以实现这一点，我想请教这里的专家如何做到这一点。

代码下方：

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;
}

请查看我在上面 post 编辑的笔以获得完整代码。我不确定post他的整个长度是什么好主意。

Answer 1

固定元素不在正常 html 流中。因此，您的 table header 不再是 table 的一部分。所以，他们的行为是独立的。

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

Answer 2

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

将主容器设为弹性容器。
在 Main-Container 内，将 flex-direction 设为 "column"。

关于Flex的更多内容，您可以搜索：

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

防止宽度变化应用 position:fixed

Prevent width changes applying position:fixed

css

css-position

css-tables

flexbox

fixed-header-tables