时间戳

首页 > 解决方案 > 具有固定标题和第一列的表格（如有必要，HTML、CSS、JS）？

html-table - 具有固定标题和第一列的表格（如有必要，HTML、CSS、JS）？

问题描述

因此，我正在尝试创建一个具有固定第一行（标题）和第一列的表格，就像在 excel 中冻结窗格一样。我已经尝试查看其他用户的帖子和相应的答案来尝试复制我的表的代码，但没有任何运气。在水平滚动（右/左）时，我希望整个第一列保持固定 - 就像“位置：粘性；” 物业工作。在垂直滚动（向上/向下）时，我希望整个第一行保持固定 - 以相同的方式。

下面是我的表的基本代码。我的代码中也有一个导航栏，但不认为这会对这段代码产生影响。

此外，我正在使用 Ajax/JQuery 填充表，并对每个表使用 unqiue Ajax 调用，这就是为什么我使用两个表来显示这些数据的原因。如果我需要一个表中的所有数据才能修复第一行和第一列，请告诉我。出于视觉辅助的目的，我手动输入了以下数据。

先感谢您 ！如果您有任何问题或想查看更多代码，请告诉我。

body {
  padding: 0;
  margin: 0;
  background: url("../images/march-madness-background.jpg") no-repeat center center fixed;
  background-size: cover;
  color: #000;
  margin-top: 44px;
}

:root {
  --primary-color: #1993e7;
  --secondary-color: #147abd;
}

table,
tr,
td {
  border-collapse: collapse;
  border: 2px solid var(--secondary-color);
  background-color: #fff;
  color: #000;
  width: 155px;
  min-width: 155px;
  height: 22px;
  overflow: hidden;
  /*position: relative;*/
  /*white-space: nowrap;*/
}

#big-grid-games {
  position: sticky;
  top: 44px;
  z-index: 9999;
}

.scroller {
  overflow-x: scroll;
  overflow-y: visible;
  padding: 0;
  margin-left: 155px;
}

.sticky-col {
  left: 0;
  position: absolute;
  top: auto;
  width: 155px;
}

#separators td {
  color: #ffffff;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="css/style4.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</head>

<body>

  <table id="big-grid-games" cellpadding="1" cellspacing="1" border="1">
    <tbody>
      <tr>
        <td class="sticky-col" width="155" align="center">Favorite</td>
        <td width="155" align="center">UNC</td>
        <td width="155" align="center">Michigan</td>
        <td width="155" align="center">Kansas</td>
      </tr>
      <tr>
        <td class="sticky-col" width="155" align="center">Point Spread</td>
        <td width="155" align="center">12</td>
        <td width="155" align="center">9.5</td>
        <td width="155" align="center">11.5</td>
      </tr>
      <tr>
        <td class="sticky-col" width="155" align="center">Underdog</td>
        <td width="155" align="center">Baylor</td>
        <td width="155" align="center">Texas</td>
        <td width="155" align="center">Nevada</td>
      </tr>
      <tr id="separators">
        <td class="sticky-col" width="155" align="center">_</td>
        <td width="155" align="center">_</td>
        <td width="155" align="center">_</td>
        <td width="155" align="center">_</td>
      </tr>
    </tbody>
  </table>

  <div class="scroller">
    <table id="big-grid-players" cellpadding="1" cellspacing="1" border="1">
      <tbody>
        <tr>
          <td class="sticky-col" style="padding: 1px;" width="155" align="center">Chris</td>
          <td width="155" align="center" class="">UNC</td>
          <td width="155" align="center" class="">Texas</td>
          <td width="155" align="center" class="">Nevada</td>
        </tr>
        <tr>
          <td class="sticky-col" style="padding: 1px;" width="155" align="center">Dave</td>
          <td width="155" align="center" class="">UNC</td>
          <td width="155" align="center" class="">Michigan</td>
          <td width="155" align="center" class="">Nevada</td>
        </tr>
        <tr>
          <td class="sticky-col" style="padding: 1px;" width="155" align="center">John</td>
          <td width="155" align="center" class="">Baylor</td>
          <td width="155" align="center" class="">Texas</td>
          <td width="155" align="center" class="">Nevada</td>
        </tr>
        <tr>
          <td class="sticky-col" style="padding: 1px;" width="155" align="center">Steve</td>
          <td width="155" align="center" class="">UNC</td>
          <td width="155" align="center" class="">Michigan</td>
          <td width="155" align="center" class="">Kansas</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

标签： html-tablecss-positioncss-tablesstickyfixed-header-tables

解决方案

推荐阅读