0

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

在此处输入图像描述

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

这里是工作笔的链接：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;
}

请查看我在上面发布的笔以获取完整代码。我不确定把它全长贴出来是个好主意。

4

2 回答 2

2

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

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

于 2017-01-11T12:41:52.283 回答
1

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

  1. 将 Main Container 设为 flex 容器。
  2. 在 Main-Container 中，将 flex-direction 设置为“列”。

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

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

于 2017-01-12T07:29:22.883 回答