窗口滚动固定表格标题

时间：2017-12-08 21:33:17

标签： css angular css3 bootstrap-4

我有一个包含很多行的简单Bootstrap表。 有没有办法在滚动窗口时固定表头，但每个列标题的宽度等于具有最多文本的行的宽度。 因为在将表标题位置设置为固定时，标题不会根据内容更改其宽度。 换句话说，设置每列的宽度取决于列中最宽的值（标题中的标题或单元格中的值）。 有没有办法将这样的计算放在标题列宽度上？ 我想不出任何其他方法来做到这一点。 我正在使用角度。

以下是将标题行的位置设置为固定时我尝试过的内容：JsFiddle 如您所见，列不与正文中的相应列对齐。 我需要它们对齐，但没有为每列设置固定的宽度，因为我不知道我得到的数据有多长。

HTML code：

<div class="col-md-12 tableDiv"  >
 <table class="table table-striped" >
  <thead class="table-bordered">
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>

    </tr>
  </thead>
  <tbody >
    <tr>
      <td > FIRST</td>
      <td >asdasdfasf</td>
      <td >fsdf</td>
      <td>sdfsfd</td>
      <td>sdfs</td>
      <td>fsdfsdf</td>
    </tr>
        <tr>
      <td > asdf</td>
      <td >asdfa</td>
      <td >fsdf</td>
      <td>sdfsfd</td>
      <td>sdfs</td>
      <td>fsdfsdf</td>
    </tr>
        <tr>
      <td > asdf</td>
      <td >asdfa</td>
      <td >fsdf</td>
      <td>sdfsfd</td>
      <td>sdfs</td>
      <td>fsdfsdf</td>
    </tr>
  </tbody>
</table>
  </div>
<div>
</div>

的CSS：

.table-bordered tr {
  position: fixed;
   z-index:1;
  top: 50px;
  background: #fff;
 }

1 个答案:

答案 0 :(得分：0)

如果您不关心性能，并且标题中没有边框（因为边框不会获得CSS转换），则可以使用CSS3转换解决方案。该技术是采用窗口的滚动并将变换应用于具有相同值的标题。这样，标题不固定，并保持其原始宽度：

let header = document.querySelector(".table-bordered");
let body = document.body;

function setTranslate (element, value) {
    let style = `translateY(${value}px)`;
    element.style.oTransform = style;
    element.style.MozTransform = style;
    element.style.WebkitTransform = style;
    element.style.transform = style;
}

window.onscroll = () => {
    setTranslate(header, window.scrollY);
};

jsFiddle working example

这个解决方案的不好之处在于你需要在每个滚动事件中更新标题的样式，因此，性能不够好。另一个解决方案是构建两个不同的表，一个用于标题，另一个用于主体，另一个用于设置标题宽度的通用函数，同时考虑主体的宽度。通过这种方式，您可以在position中设置表的fixed属性，并且可以在窗口的每个大小调整中或在需要刷新表大小的每个时刻调用此函数。看一下下一个片段：

let header = document.querySelector(".table-header");
let body = document.querySelector(".table-body");
let htds = header.querySelectorAll("th");
let btds = body.querySelectorAll("tbody tr:first-child td");

function fixHeaderWidths() {
  header.style.width = `${body.offsetWidth}px`;
  Array.prototype.forEach.call(htds, (td, index) => {
    td.style.width = `${btds[index].offsetWidth}px`;
  });
  body.style.top = "";
  let top = (header.getBoundingClientRect()).bottom - (btds[0].getBoundingClientRect()).top;
  body.style.top = `${top}px`;
}

fixHeaderWidths();

window.onresize = fixHeaderWidths;
.table-header {
  background: white;
  position: fixed;
  table-layout: fixed;
  z-index: 1;
}

.table-body {
  position: relative;
}

.table-body thead {
  visibility: hidden;
}

.tableDiv {
  margin-top: 40px
}
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 tableDiv">
  <table class="table-header table table-stripedcf table-bordered">
    <thead>
      <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th>Column5</th>
        <th>Column6</th>
      </tr>
    </thead>
  </table>
  <table class="table-body table table-stripedcf table-bordered">
    <thead>
      <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th>Column5</th>
        <th>Column6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>FIRST</td>
        <td>asda sdfasf</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdfa</td>
        <td>fsdf</td>
        <td>sdfsfd</td>
        <td>sdfs</td>
        <td>fsdfsdf</td>
      </tr>
    </tbody>
  </table>
</div>

  

如果您不想使用jQuery，请不要使用Bootstrap脚本文件（我已经看到您已将其包含在jsFiddle中），因为它需要jQuery工作。但您可以使用this替代它。

相关问题
最新问题