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作为主要容器。它将解决您的宽度问题。

将主容器设为灵活容器。
在主要容器内，将弹性方向设为＆＃34;列＆＃34;。

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

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

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

2 个答案: