Таблица с фиксированным заголовком и первым столбцом (HTML, CSS, JS при необходимости)? - PullRequest
Новая
       53

Таблица с фиксированным заголовком и первым столбцом (HTML, CSS, JS при необходимости)?

0 голосов
/ 15 января 2019

Итак, я пытаюсь создать таблицу с фиксированной первой строкой (заголовком) и первым столбцом, например, как можно было бы заморозить панели в Excel. Я пытался просмотреть посты других пользователей и соответствующие ответы, чтобы попытаться повторить код для моей таблицы, но мне не повезло. При горизонтальной прокрутке (вправо / влево) я бы хотел, чтобы весь первый столбец оставался фиксированным - очень похоже на то, как «position: sticky;» собственность работает. При вертикальной прокрутке (вверх / вниз) я бы хотел, чтобы весь первый ряд оставался фиксированным - таким же образом.

Ниже приведен основной код моей таблицы. У меня также есть навигационная панель в моем коде, но не думаю, что это должно повлиять на этот код.

Кроме того, я заполняю таблицу с помощью Ajax / JQuery и использую необязательный 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>
...