纯CSS滚动tbody和静态thead表w /动态高度＆amp;宽度

Question

我的任务是创建一个可用作布局主要部分的表。表的标题应该是静态的，而body应该在必要时滚动。问题是如果需要滚动条，则表的列会变得不对齐，因为tbody的宽度会发生变化。

我通过在thead上设置正确的填充等于滚动条的宽度来使用一些javascript进行补偿，并计划在滚动条消失/出现时使用侦听器删除/添加填充。< / p>

虽然这种方法可以使列保持一致，但我被要求在可能的情况下提出仅HTML / CSS解决方案。有没有人知道如何在没有任何js的情况下实现这一目标？感谢。

我目前拥有的一些相关CSS：

table {
  width: 100%;
  border-collapse: collapse;
}

table tbody {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

table thead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

这是查看整个示例的小提琴：http://jsfiddle.net/kirky93/qqv73kjo/5/
向上/向下拖动视口以使滚动条显示为/显示问题。

Answer 1

为了消除纯CSS的错位，我们可以让滚动条将标题推到一边。我们可以通过设置position: fixed来实现这一点，以便tbody上的滚动条延伸到视口的顶部。

阅读太多了？跳到底部的示例。

列颜色和宽度

使用七个<col> elements，一个代表每列。我们可以使用宽度和背景颜色将类放在它们上，并且将对整个列重复这些属性，而无需在每个表格单元格上放置类。它们看起来像这样：

<table class="fixed">      
  <col class="one">
  <col class="two">
  <col class="three">
  <col class="four">
  <col class="five">
  <col class="six">
  <col class="seven">

为了在列上放置width CSS属性，我们可以在table元素上设置table-layout: fixed。现在不需要匹配的最小/最大宽度。

让thead滚动

• 设置position: fixed
• 设置display: table使其表现得像桌子一样
• 设置table-layout: fixed以使宽度正常
• 由于thead现已从其表格和<col>元素中有效删除，因此请在每个th上设置列类

tbody

• 将其保留在初始position: static
• 将上边距设置为与thead相同的高度

完整示例

注意box-sizing: border-box使元素包括填充和边框的宽度和高度。

＆＃13;

＆＃13;

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 0;
}
table {
  border-collapse: collapse;
  background: #FFF;
  table-layout: fixed;
  width: 100%;
}
table thead {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #FFF;
  display: table;
  table-layout: fixed;
  border: solid 1px #000;
}
table tbody {
  margin-top: 24px;
}
table {
  /*Make sure table has border that matches the cell border so it is included in the width*/
  border: 1px solid black;
}
td,
th {
  height: 20px;
  border: 1px solid black;
}
.one {
  width: 30px;
  background-color: yellow;
}
.two {
  width: 30px;
  background-color: orange;
}
.three {
  width: 30px;
  background-color: red;
}
.four {
  width: 100%;
}
.five {
  width: 100px;
  background-color: green;
}
.six {
  width: 100px;
  background-color: lightblue;
}
.seven {
  width: 100px;
}

＆＃13;

<table class="fixed">
  
  <col class="one">
  <col class="two">
  <col class="three">
  <col class="four">
  <col class="five">
  <col class="six">
  <col class="seven">

  <thead>
    <tr>
      <th class="one">1</th>
      <th class="two">2</th>
      <th class="three">3</th>
      <th class="four">4</th>
      <th class="five">5</th>
      <th class="six">6</th>
      <th class="seven">7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将其设置为溢出：滚动tbody而不是auto

table tbody {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
}