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

Question

I'm trying to have an html table where the first column is sticky. I followed other advice on using position: sticky. I'm also using some javascript because I'm building the table dynamically depending on the data passed to the DOM. The following code works as expected:

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;
}

Here is the jsfiddle link.

However, when I try to use this code in my actual webpage, it does not work as expected. In my actual webpage, the text in the table cells that scrolls will sit over top of the sticky column (whereas in the jsfiddle, the cell text will go behind the sticky column - hidden by the background-color: #fff).

The webpage code and js is almost the same as the jsfiddle, the css is the same for both.

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>

There are a couple of tags in here from the django framework such as {{ student }} but I don't think they are problem - they're just how I'm passing data to the DOM. It's also how I iterate through the data. All of the text, colors, data, displays as expected except for the cell data/text not scrolling behind the sticky column.

My webpage is using boostrap 4, I don't know if that is causing the issue.

Edit I have set up a demo account to see this issue live. Here is the direct link to a page that will show issue, you may need to make your browser window a bit more narrow to bring up the table scrolling. username: Demo password: demodemo

Answer 1

I just checked out your website and the following CSS changes fix the issue:

First, remove the z-index from this CSS selector (style.css):

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

Instead, add a z-index to your .filled elements:

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

Also, in order to get rid of the rows being shown left to the row header (when scrolling), remove (or overwrite) the padding on this element (bootstrap's _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);
}