HTML Table 固定第一列，单元格文本不在粘滞列后面

Question

我正在尝试 html table，其中第一列是粘性的。我听从了其他关于使用 position: sticky 的建议。我还使用了一些 javascript，因为我正在根据传递给 DOM 的数据动态构建 table。以下代码按预期工作：

html

<table class="table table-hover">
    <thead>
      <tr>
        <th scope="col" class="filled">Person</th>
        <th scope="col"># Items 1</th>
        <th scope="col"># Items 2</th>
        <th scope="col"># Items 3</th>
        <th scope="col"># Items 4</th>
        <th scope="col"># Items 5</th>
        <th scope="col"># Items 6</th>
    <th scope="col"># Items 7</th>
        <th scope="col"># Items 8</th>
        <th scope="col"># Items 9</th>
        <th scope="col"># Items 10</th>
        <th scope="col"># Items 11</th>
    <th scope="col"># Items 12</th>
        <th scope="col"># Items 13</th>
        <th scope="col"># Items 14</th>
        <th scope="col"># Items 15</th>
        <th scope="col"># Items 16</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="row_1" class="filled">Jim</td>
        <td id="row_1_col_1">64</td>
        <td id="row_1_col_2">12</td>
        <td id="row_1_col_3">33</td>
        <td id="row_1_col_4">32</td>
        <td id="row_1_col_5">59</td>
    <td id="row_1_col_6">64</td>
        <td id="row_1_col_7">12</td>
        <td id="row_1_col_8">33</td>
        <td id="row_1_col_9">32</td>
        <td id="row_1_col_10">59</td>
      </tr>
      <tr>
        <td id="row_2" class="filled">Sam</td>
        <td id="row_2_col_1">83</td>
        <td id="row_2_col_2">12</td>
        <td id="row_2_col_3">32</td>
        <td id="row_2_col_4">27</td>
        <td id="row_2_col_5">9</td>
    <td id="row_2_col_6">83</td>
        <td id="row_2_col_7">12</td>
        <td id="row_2_col_8">32</td>
        <td id="row_2_col_9">27</td>
        <td id="row_2_col_10">9</td>
      </tr>
      <tr>
        <td id="row_3" class="filled">Ted</td>
        <td id="row_3_col_1">11</td>
        <td id="row_3_col_2">39</td>
        <td id="row_3_col_3">77</td>
        <td id="row_3_col_4">68</td>
        <td id="row_3_col_5">93</td>
    <td id="row_3_col_6">11</td>
        <td id="row_3_col_7">39</td>
        <td id="row_3_col_8">77</td>
        <td id="row_3_col_9">68</td>
        <td id="row_3_col_10">93</td>
      </tr>
    </tbody>
</table>

javascript

var rowName = [];
var cellName = [];
var numberPeople = 3;
var numberItems = 10;
var score = 5
for(var n=0; n < (numberPeople); n++) {       
  for(var i = 0; i < numberItems; i++) {
    // +1 b/c starts at 0
    rowName[n] = "row_" + (n + 1) + "_col_" + (i+1);
    cellName[n] = document.createElement('td');
    document.getElementById(rowName[n]).appendChild(cellName[n]);
    switch (score) {
        case 5:
        document.getElementById(rowName[n]).style.backgroundColor = "#fff";
    document.getElementById(rowName[n]).style.opacity += "0.5";
        break;
    }
  }
}

css

.table th:first-child,
.table td:first-child {
  position: sticky;
  left: 0;
  z-index: 6;
  
}

 .table .filled {
    background-color: #fff;
}

这里是 jsfiddle link.

但是，当我尝试在我的实际网页中使用此代码时，它没有按预期工作。在我的实际网页中，滚动的 table 单元格中的文本将位于粘性列的顶部（而在 jsfiddle 中，单元格文本将位于粘性列的后面 - 被背景色隐藏：#fff ).

网页代码和js与jsfiddle几乎一样，css两者相同

html

<div class="container ps-4">
  <div class="row">
    <div class = "table-responsive">
      <table id="grade-table" class="table table-bordered table-sm ">
        <thead>
          <tr>
            <th scope="col" class="filled">Students</th>
            {% for obj in objective_list %}
            <th scope="col">{{ obj.objective_name }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for student in student_list %}
          <tr>
            <td id="row_{{ forloop.counter }}" class="filled">{{ student }}</td>
            {% for obj in objective_list %}
                <td id="row_{{ forloop.parentloop.counter }}_col_{{ forloop.counter }}"></td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  
</div>


<div>

javascript

    <script>
        // gradeArray contains number of students & objectives, objective name and score for each objective
        var gradeArray = {{ grade_report|safe }};
        var numberStudent = gradeArray.shift();
        var numberObj = gradeArray.shift();
        
        if (numberObj > 0) {
          var obj = []
          for (var g = 0; g < numberObj; g++) {
            obj[g] = gradeArray.shift();
          }
        }

      var rowName = [];
      var studentname = [];
      var objective = [];
      var cellName = [];
      
      if (numberObj > 0) {
        for(var n=0; n < (numberStudent); n++) {       
          for(var i = 0; i < numberObj; i++) {
            // +1 b/c starts at 0
            rowName[n] = "row_" + (n + 1) + "_col_" + (i + 1);
            cellName[n] = document.createElement('td');
            // numberObj + 2 b/c in the array one index is the name and the other is the grade
            let score = gradeArray[(n)*(numberObj+2)+i+1];
            cellName[n].innerHTML = score
            document.getElementById(rowName[n]).appendChild(cellName[n]);
            //document.getElementById(rowName[n]).style.color = "grey";
            switch (score) {
              case 'BEG':
              case 'EMG':
                document.getElementById(rowName[n]).className += "table-danger";
                break;
              case 'DEV':
                document.getElementById(rowName[n]).className += "table-warning";
                break;
              case 'APP':
              case 'PRF':
                document.getElementById(rowName[n]).className += "table-success";
                break;
              case 'APP+':
              case 'PRF+':
                document.getElementById(rowName[n]).className += "table-info";
                break;
              case 'EXT':
                document.getElementById(rowName[n]).className += "table-primary";
                break;
              case '---':
              case 'I':
                document.getElementById(rowName[n]).className += "table-secondary";
                document.getElementById(rowName[n]).style.opacity += "0.5"; 
                break;
            }
            
          }
               
        }
      }
    </script>

这里有一些来自 django 框架的标签，例如 {{ student }} 但我不认为它们有问题 - 它们只是我将数据传递给 DOM.这也是我遍历数据的方式。所有文本、颜色、数据均按预期显示，但单元格 data/text 未在粘性列后面滚动。

我的网页使用的是 boostrap 4，我不知道这是否导致了问题。

编辑我已经设置了一个模拟账户来实时查看此问题。 Here is the direct link 到将显示问题的页面，您可能需要使浏览器 window 更窄一些以显示 table 滚动。用户名：演示密码：demodemo

Answer 1

我刚刚查看了您的网站，以下 CSS 更改解决了问题：

首先，从此 CSS 选择器 (style.css) 中删除 z-index：

.table th:first-child, .table td:first-child {
    position: sticky;
    left: 0;
    /* z-index: 6; */

相反，将 z-index 添加到您的 .filled 元素：

.table .filled {
    background-color: #fff;
    z-index: 1;
}

此外，为了摆脱 header 行左侧显示的行（滚动时），删除（或覆盖）此元素上的填充（bootstrap 的 _grid.scss):

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    /* padding-left: calc(var(--bs-gutter-x) * .5); */
    margin-top: var(--bs-gutter-y);
}

HTML Table 固定第一列，单元格文本不在粘滞列后面

HTML Table fixed first column, cell text is not behind sticky column

html

javascript

css

html-table

bootstrap-4