个人中心
gpt4 book ai didi

javascript - 具有固定(卡住)列和标题的 HTML 表格

转载 作者：IT王子 更新时间：2023-10-29 03:22:21 26 4
gpt4 key购买 nike

我一直在网上搜索如何制作具有固定(卡住)列和标题的表格。似乎我终于找到了解决方案并根据我的需要对其进行了修改。

原始 fiddle 是here .

Here是我修改的解决方案。我在 Chrome(版本:55.0.2883.87 m)和 Firefox(版本:51.0.1)中进行了测试。

问题是它不能完全在 IE(版本:11.0.9600.18427)中运行。在水平滚动期间，标题的卡住部分也会滚动。有人可以帮我让它在 IE 中工作吗？还有一个问题:这种方法使用安全吗？我的意思是，如果它使用了一些未指定的行为，那么一些 future 的浏览器甚至一些现代浏览器可能会以错误的方式显示我的表格，最好使用具有几个不同表格并同步滚动位置和行的安全解决方案高度。UPD: 还有一个问题:如何使它在移动设备上稳定运行？

下面是一些演示该方法的代码:

$(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
  	/*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain 			it's relative position at the left of the table.    
    */
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
  });
});
.container {
  height:200px; 
  width:400px;
  overflow: hidden;
}

table {
  position: relative;
  background-color: #aaa;
  border-collapse: collapse;
table-layout: fixed;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}


/*thead*/
thead {
  position: relative;
  display: block; /*seperates the header from the body allowing it to be positioned*/
}

thead th {
  background-color: #99a;
  min-width: 120px;
  border: 1px solid #222;
}

thead th:nth-child(1) {/*first cell in the header*/
  position: relative;
  background-color: #88b;
}


/*tbody*/
tbody {
  flex: 1;
  position: relative;
  display: block; /*seperates the tbody from the header*/
  overflow: auto;
}

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
}

tbody tr td:nth-child(1) {  /*the first cell in each tr*/
  position: relative;
  background-color: #99a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">

  <table>
    <thead>
      <tr>
        <th>Name<br/>123</th>
        <th>Town</th>
        <th>County</th>
        <th>Age</th>
        <th>Profession</th>
        <th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
      </tr>
       <tr>
        <th>Name</th>
        <th>Town</th>
        <th>County</th>
        <th>Age<br/>123<br/>321</th>
        <th>Profession</th>
        <th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Smith</td>
        <td>Macelsfield</td>
        <td>Cheshire<br/>123</td>
        <td>52</td>
        <td>Brewer</td>
        <td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Jenny Jones<br/>123<br/>312</td>
        <td>Threlkeld</td>
        <td>Cumbria</td>
        <td>34</td>
        <td>Shepherdess</td>
        <td>£28,000</td>
        <td>Single</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Peter Frampton</td>
        <td>Avebury</td>
        <td>Wiltshire</td>
        <td>57</td>
        <td>Musician</td>
        <td>£124,000</td>
        <td>Married</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Simon King</td>
        <td>Malvern</td>
        <td>Worchestershire</td>
        <td>48</td>
        <td>Naturalist</td>
        <td>£65,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Lucy Diamond</td>
        <td>St Albans</td>
        <td>Hertfordshire</td>
        <td>67</td>
        <td>Pharmasist</td>
        <td>Retired</td>
        <td>Married</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Austin Stevenson</td>
        <td>Edinburgh</td>
        <td>Lothian </td>
        <td>36</td>
        <td>Vigilante</td>
        <td>£86,000</td>
        <td>Single</td>
        <td>Unknown</td>
      </tr>
      <tr>
        <td>Wilma Rubble</td>
        <td>Bedford</td>
        <td>Bedfordshire</td>
        <td>43</td>
        <td>Housewife</td>
        <td>N/A</td>
        <td>Married</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Kat Dibble</td>
        <td>Manhattan</td>
        <td>New York</td>
        <td>55</td>
        <td>Policewoman</td>
        <td>$36,000</td>
        <td>Single</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Henry Bolingbroke</td>
        <td>Bolingbroke</td>
        <td>Lincolnshire</td>
        <td>45</td>
        <td>Landowner</td>
        <td>Lots</td>
        <td>Married</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Alan Brisingamen</td>
        <td>Alderley</td>
        <td>Cheshire</td>
        <td>352</td>
        <td>Arcanist</td>
        <td>A pile of gems</td>
        <td>Single</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
  
</div>
</body>

最佳答案

这很奇特。看来有问题的代码是这一行:

$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling

看起来 IE11 处理嵌套元素的相对定位的方式不同(与 Chrome 和其他浏览器不同)。在这种情况下，您将使用带有偏移量的相对定位来定位 thead。您还使用偏移量和相对定位来定位 thead th(它的 child )。 Chrome 似乎是相对于 table 定位 thead，然后相对于 thead 定位 th。另一方面，IE11 似乎是相对于 table 定位 thead，然后 th 只是继承相同的定位，而不管它自己的定位.

对此的修复如下:在 IE11 上，以不同方式处理 thead 的定位。不是在父元素 thead 上设置定位，而是在 thead th 元素上设置定位。这样一来，您的第一列就不会“被迫”继承 thead 的定位(在 IE 中)。

$(document).ready(function() {
  var isIE11 = !!navigator.userAgent.match(/Trident.*rv\:11\./);
  var customScroller;
  if (isIE11)
    customScroller = function() {
      $('thead th').css("left", -$("tbody").scrollLeft()); //if using IE11, fix the th element 
    };
  else
    customScroller = function() {
      $('thead').css("left", -$("tbody").scrollLeft()); //if not using IE11, fix the thead element
    };

  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
    /*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain             it's relative position at the left of the table.    
    */
    customScroller(); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
//fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
  });
});

这是您的代码的完整示例，显示了基于浏览器的不同处理方式:

https://jsfiddle.net/8tx4xfhx/5/

另外，很高兴看看以前是否有人注意到过这种行为。看来 IE11 处理嵌套相对定位的方式与其他浏览器不同。某处是否有规范定义标准应该是什么？相对定位是否应该像IE那样继承？或者相对定位应该总是相对于父级？我会认为是后者。但也必须考虑性能因素。

关于javascript - 具有固定(卡住)列和标题的 HTML 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42004958/

26 4 0
文章推荐： javascript - 防止浏览器扩展注入(inject) Javascript 代码
文章推荐： go - 如何创建一个空的 sql.Rows 实例？
文章推荐： go - 使用 golang 服务静态文件
文章推荐： go - 验证在 struct golang 中设置了字段
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com