窗口滚动上的固定表格标题

问题描述 投票：0回答：2

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

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

HTML 代码：

<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;
 }
angular css bootstrap-4
2个回答
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 工作示例

这个解决方案的缺点是你需要在每个滚动事件中更新标题的样式，因此，性能不够好。另一种解决方案是构建两个不同的表，一个用于标题，另一个用于正文，以及一个通用函数，该函数根据正文的宽度来设置标题的宽度。这样，您可以在 

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 之类的东西来替换它。

0
投票
    <ul style="list-style: none; padding-left: 20px;">
        <!-- Hello Action -->
        <li style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom: 10px; border-bottom: 2px solid #000;">
            <label style="cursor: pointer; font-size: 16px; font-weight: bold; color: #333; margin: 5px 0;">
                <span style="font-size: 20px; color: #28a745;">A</span> test 1
            </label>
            <div style="margin-left: 20px; padding-left: 10px;">
                <ul style="list-style: none; padding-left: 20px;">
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #28a745;">1</span> Hello 1</li>
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #28a745;">1</span> Hello 2</li>
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #28a745;">1</span> Hello 3</li>
                </ul>
            </div>
        </li>

        <!-- Sample Action -->
        <li style="background-color: #e9ecef; padding: 10px; border-radius: 5px; margin-bottom: 10px; border-bottom: 2px solid #444;">
            <label style="cursor: pointer; font-size: 16px; font-weight: bold; color: #333; margin: 5px 0;">
                <span style="font-size: 20px; color: #007bff;">B</span> test 2
            </label>
            <div style="margin-left: 20px; padding-left: 10px;">
                <ul style="list-style: none; padding-left: 20px;">
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #007bff;">2</span> Sample 1</li>
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #007bff;">2</span> Sample 1</li>
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #007bff;">2</span> Sample 1</li>
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #007bff;">3</span> Sample 1</li>
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #007bff;">3</span> Sample 1</li>
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #007bff;">3</span> Sample 1</li>
                </ul>
            </div>
        </li>

        <!-- Destroy Action -->
        <li style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; margin-bottom: 10px; border-bottom: 2px solid #000;">
            <label style="cursor: pointer; font-size: 16px; font-weight: bold; color: #333; margin: 5px 0;">
                <span style="font-size: 20px; color: #dc3545;">C</span> test 3
            </label>
            <div style="margin-left: 20px; padding-left: 10px;">
                <ul style="list-style: none; padding-left: 20px;">
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #dc3545;">4</span> Sample 1</li>
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #dc3545;">4</span> Sample 1</li>
                    <li style="font-size: 14px; color: #555;"><span style="font-size: 20px; color: #dc3545;">4</span> Sample 1</li>
                </ul>
            </div>
        </li>
    </ul>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.