Bootstrap 在桌子上冻结头答案

【问题标题】：Bootstrap Freeze thead on tableBootstrap 在桌子上冻结头
【发布时间】：2019-12-09 18:49:43
【问题描述】：

我正在尝试冻结我的 html 表 (thead) 中的第一行，但是当我尝试以下 CSS 代码时：

table {
    width: 100% !important;
}

thead, tbody {
    display: block;
}

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;
}

tbody {
    height: 500px;
    overflow-y: auto;
}

thead 与 tbody 的大小不同。 tbody 可以滚动到thead 处于固定位置，但不一样，tr 被捆绑在一起。这是我的 HTML：

<table id="MVCGridTable_Grid" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
    </tbody>
</table>

这是我尝试整理的 DEMO，但我添加的 Bootstrap 似乎不起作用，所以请原谅缺少样式：

这是我得到的结果：

【问题讨论】：

I am trying to freeze my first row in my html table。您想在桌子或屏幕上冻结头吗？
@Sunil 例子？
jsfiddle.net/0xu5d1tk 当thead被固定在表中时
jsfiddle.net/h1jrpo3v 当广告固定在屏幕上时
尝试在两个小提琴中滚动页面。我认为其中之一也可以解决您的问题

标签： html css twitter-bootstrap

【解决方案1】：

为此，您需要用position: relative、height 或max-height 将表格包装在一个元素中（注意某些版本的IE 在calc() 中有/遇到了一些问题max-height）通过浏览器转换为物理大小，并应用于您的粘性<thead> 中的每个th/td sticky-top 类，或者，如果您愿意，可以使用以下CSS：

position: sticky;
top: 0;
z-index: 1020;

看看它的工作原理：

"use strict";

var stickySituation = function stickySituation(o) {
  return $("".concat(o, " .sticky-top")).css('position') === 'fixed';
};

var updateStickyHeader = function updateStickyHeader(i, e) {
  var cell = $("tbody tr>*:nth-child(".concat(i + 1, ")"), $(e).closest('table')).eq(0)[0];

  if (cell) {
    var box = cell.getBoundingClientRect();
    $(e).css({
      top: 0,
      width: box.width,
      height: box.height,
      left: box.left
    });
  }
};

$(window).on('load', function () {
  var sh = '.table-responsive.sticky-headers';
  $('thead th').addClass('sticky-top bg-white');

  if (stickySituation(sh)) {
    $(sh).css({
      paddingTop: $('tbody tr>*:nth-child(1)', sh).eq(0).css('height')
    });
    $(window).on('resize', function () {
      $('thead th').each(updateStickyHeader);
    });
    $(window).trigger('resize');
  }
});

.table-responsive {
  max-height: 100vh;
  /* whatever makes sense */
  overflow-y: auto;
}

.table-responsive .sticky-top {
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 1px 0 0 gainsboro;
  /* hack for IE: */ position: fixed;
  position: sticky;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="table-responsive position-relative sticky-headers">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
      <tr>
        <th scope="row">7</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">8</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">9</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

更新：为不支持position: sticky（即：IE）的浏览器添加了JS。
现代浏览器只需要来自脚本的23 行（它只将sticky-top 和bg-white 类添加到每个<th>，这显然可以手动完成）。
也就是说，您实际上并不需要现代浏览器中的 JS 部分才能使其工作（只要您将类（或 CSS 规则）应用于您的标记，如上所述）。

【讨论】：

这有点用......它增加了一个额外的滚动条，顶部有一个小空间可以看到表格滚动
你从来没有提到它必须在 IE 中工作。没有人再使用 IE，除了网站所有者和开发人员检查他们的网站是否在其中运行。它在所有版本中的市场份额合计约为 2%，被 UC Browser、Samsung Internet 和 Opera 超越。如果您的目标是 IE，为什么要使用 Bootstrap？在他们的docs 中阅读免责声明。他们提到的不受支持的功能之一是position: sticky。
我添加了一个 hack 让它在 IE 中工作。至于 “来自有信誉的来源” 部分，帮不了你，伙计。如果我在回答你的问题时知道这就是你要找的东西，我就不会打扰了。我完全没有名誉。
要读取第二个滚动条，请删除 all 您的 CSS 尝试在此表上实现粘性标题。也就是说，您必须从 CSS 中删除 tbody 和 overflow-y: auto 上的集合 height。相反，将所需的高度放在.table-responsive，而不是我使用的100vh。在没有minimal reproducible example 的情况下，我可以为您提供尽可能多的帮助。

【解决方案2】：

尝试以这种方式实现。

$(".table_container").scroll(function(){
  var topPosition = $(".table_container").scrollTop();
  $("#MVCGridTable_Grid thead tr th").css({"top": (topPosition)});
});

table {
  width: 100% !important;
  margin: 0 !important;
}
.table_container {
  max-height: 180px;
  overflow: auto;
  position: relative;
}
thead tr th{
  color: #fff;
  text-align: left;
  background-color: #000;
  position: relative;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="table_container">
		<table id="MVCGridTable_Grid" class="table table-striped table-bordered">
			<thead>
				<tr>
					<th>aaa</th>
					<th>aaa</th>
					<th>aaa</th>
					<th>aaa</th>
					<th>aaa</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
				<tr>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
					<td>aaa</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

我希望这个解决方案对你有用。

我也检查了它的 IE，它在滚动时摇晃，但运行良好，这是因为其他浏览器中的浏览器响应它运行顺利。

谢谢...

【讨论】：

我只是设置表头位置：相对并使用简单的 jquery 更新它的顶部位置。
它是否适合您，请在此处添加评论。

【解决方案3】：

在当前项目中有来自客户的相同请求。我只是创建了甜美简单的代码 sn-p。试试这个我希望它会帮助你。谢谢

table thead th {
  background-color: #fff;
  box-shadow: 0.125rem 0 0.1875rem #dee2e6;
  position: sticky;
  top: 0;
  z-index: 2;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<table id="MVCGridTable_Grid" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
    </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

【讨论】：

【解决方案4】：

刚刚修改了您的代码，这是您可以使用的可能解决方案之一试试

    table{
       border-collapse: collapse;
}
table thead{
    padding-right: 17px; // scroll width is 17px wide
}
thead th, td {
    width: 100px;
    height: 30px;
    text-align: left;
    word-break: break-all;
}

【讨论】：

【解决方案5】：

很可能您需要为表格单元格指定特定宽度，以实现与表格主体滚动的正确对齐。

table {
    width: 100% !important;
    border: 1px dashed #ddd;
}

thead, tbody {
    display: block;
}

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;
    background-color: #ccc;
}

tbody {
    max-height: 100px;
    overflow-y: auto;
}

tr th, tr td {
  width: 200px;
  text-align:center;
  height: 30px;
}

<table id="MVCGridTable_Grid" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
      </tr>
      <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
      </tr>
      <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
      </tr>
      <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
      </tr>
      <tr>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
      </tr>
    </tbody>
</table>

您可以通过运行上面的代码 sn-p 来检查滚动行为。

【讨论】：

【解决方案6】：

将粘性类添加到您的

.sticky{
 position:absolute
}

和你身体的最大高度

【讨论】：