Table with frozen table header and left column

index.html

  <div class="table-container">
   
  
<table>
<caption>u.s. women's national team</caption>
<thead>
<tr>
<th>name</th>
<th>#</th>
<th>position</th>
<th>games</th>
<th>goals</th>
<th>assists</th>
</tr>
</thead>
  
  <tfoot>
<tr>
<th>name</th>
<th>#</th>
<th>position</th>
<th>games</th>
<th>goals</th>
<th>assists</th>
</tr>
</tfoot>

<tbody>
<tr>
<td>morgan brian</td>
<td>6</td>
<td>midfielder</td>
<td>83</td>
<td>6</td>
<td>11</td>
</tr>

<tr>
<td>abby dahlkemper</td>
<td>7</td>
<td>defender</td>
<td>47</td>
<td>0</td>
<td>3</td>
</tr>


<tr>
<td>tierna davidson</td>
<td>12</td>
<td>defender</td>
<td>21</td>
<td>1</td>
<td>5</td>
</tr>


<tr>
<td>crystal dunn</td>
<td>19</td>
<td>defender</td>
<td>91</td>
<td>24</td>
<td>16</td>
</tr>


<tr>
<td>julie ertz</td>
<td>8</td>
<td>midfielder</td>
<td>88</td>
<td>19</td>
<td>2</td>
</tr>


<tr>
<td>adrianna franch</td>
<td>21</td>
<td>goalkeeper</td>
<td>1</td>
<td>0 cs</td>
<td>1 wc</td>
</tr>


<tr>
<td>ashlyn harris</td>
<td>18</td>
<td>goalkeeper</td>
<td>14</td>
<td>5 cs</td>
<td>2 wc</td>
</tr>


<tr>
<td>tobin heath</td>
<td>17</td>
<td>forward</td>
<td>156</td>
<td>30</td>
<td>38</td>
</tr>


<tr>
<td>lindsey horan</td>
<td>9</td>
<td>midfielder</td>
<td>74</td>
<td>10</td>
<td>23</td>
</tr>


<tr>
<td>ali krieger</td>
<td>11</td>
<td>defender</td>
<td>103</td>
<td>1</td>
<td>8</td>
</tr>


<tr>
<td>rose lavelle</td>
<td>16</td>
<td>midfielder</td>
<td>33</td>
<td>10</td>
<td>5</td>
</tr>


<tr>
<td>carli lloyd</td>
<td>10</td>
<td>forward</td>
<td>281</td>
<td>113</td>
<td>52</td>
</tr>


<tr>
<td>allie long</td>
<td>20</td>
<td>midfielder</td>
<td>45</td>
<td>6</td>
<td>3</td>
</tr>


<tr>
<td>jessica mcdonald</td>
<td>22</td>
<td>forward</td>
<td>8</td>
<td>2</td>
<td>0</td>
</tr>


<tr>
<td>samantha mewis</td>
<td>3</td>
<td>midfielder</td>
<td>56</td>
<td>14</td>
<td>5</td>
</tr>


<tr>
<td>alex morgan</td>
<td>13</td>
<td>forward</td>
<td>169</td>
<td>107</td>
<td>43</td>
</tr>


<tr>
<td>alyssa naeher</td>
<td>1</td>
<td>goalkeeper</td>
<td>53</td>
<td>28 cs</td>
<td>2 wc</td>
</tr>


<tr>
<td>kelley o'hara</td>
<td>5</td>
<td>defender</td>
<td>124</td>
<td>2</td>
<td>17</td>
</tr>


<tr>
<td>christen press</td>
<td>23</td>
<td>forward</td>
<td>123</td>
<td>49</td>
<td>30</td>
</tr>


<tr>
<td>mallory pugh</td>
<td>2</td>
<td>forward</td>
<td>56</td>
<td>16</td>
<td>16</td>
</tr>


<tr>
<td>megan rapinoe</td>
<td>15</td>
<td>forward</td>
<td>158</td>
<td>50</td>
<td>59</td>
</tr>


<tr>
<td>becky sauerbrunn</td>
<td>4</td>
<td>defender</td>
<td>164</td>
<td>0</td>
<td>7</td>
</tr>


<tr>
<td>emily sonnett</td>
<td>14</td>
<td>defender</td>
<td>32</td>
<td>0</td>
<td>3</td>
</tr>

</tbody>


</table>

style.css

table {
  border-collapse: collapse; 
  font-family: helvetica;
  caption-side: top;
  text-transform: capitalize;
}
caption {
  text-align: left; position: fixed; left: 0; top:0
}
td, th {border:  1px solid;
      padding: 10px;
      min-width: 200px;
      background: white;
      box-sizing: border-box;
      text-align: left;
}

th {
  box-shadow: 0 0 0 1px black;
}
.table-container {
  position: relative;
  max-height:  300px;
  width: 500px;
  overflow: scroll;
}

thead th, 
tfoot th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background: hsl(20, 50%, 70%);
}

thead th:first-child,
tfoot th:first-child {
  left: 0;
  z-index: 3;
}

tfoot {
  position: -webkit-sticky;
  bottom: 0;
  z-index: 2;
}

tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: hsl(20, 50%, 70%);
}

tfoot td:first-child {
  z-index: 3;
}

tbody {
  overflow: scroll;
  height: 200px;
}

/* MAKE LEFT COLUMN FIXEZ */
tr > :first-child {
  position: -webkit-sticky;
  position: sticky; 
  background: hsl(180, 50%, 70%);
  left: 0; 
}
/* don't do this */
tr > :first-child {
  box-shadow: inset 0px 1px black;
}

table-with-frozen-table-header-and-left-column.markdown

Table with frozen table header and left column

A Pen by Estelle Weyl on CodePen.

License.