title: Freezing/Fixing the Top Header Row of a table
body: <p><img src="https://i.stack.imgur.com/qrqZ7.png" alt="enter image description here">I need your help. I am unsure as to how to freeze or have the top row of my table, which contains the headers to remain frozen, while I would be able to scroll through the table? Using only CSS markup and NO Javascript frameworks, how would I be able to accomplish this?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;style type="text/css"&gt;
  
  /*------------------------------------------------------------------
  Table Style
  ------------------------------------------------------------------ */
  table a:link {
      color: #666;
      font-weight: bold;
      text-decoration:none;
  }
  table a:visited {
      color: #999999;
      font-weight:bold;
      text-decoration:none;
  }
  table a:active,
  table a:hover {
      color: #bd5a35;
      text-decoration:underline;
  }
  table {
      font-family:Arial, Helvetica, sans-serif;
      color:#666;
      font-size:12px;
      background:#eaebec;
      border:#ccc 1px solid;
  
      border-radius:3px;
      border-collapse:collapse; border-spacing: 0; 
  
      box-shadow: 0 1px 2px #d1d1d1;
      min-width: 1000px;
  }
  table th {
      padding:10px 10px 10px 10px;
      border-top:0;
      border-bottom:1px solid #e0e0e0;
      border-left: 1px solid #e0e0e0;
  
      background: #ededed;
  }
  table th:first-child {
      text-align: left;
  }
  table tr:first-child th:first-child {
      border-top-left-radius:3px;
      border-left: 0;
  }
  table tr:first-child th:last-child {
      border-top-right-radius:3px;
  }
  table tr {
      text-align: center;
  }
  table td:first-child {
      text-align: left;
      border-left: 0;
  }
  table td {
      padding:10px;
      border-bottom:1px solid #e0e0e0;
      border-left: 1px solid #e0e0e0;
      background: #fafafa;
  }
  table tr:last-child td {
      border-bottom:0;
  }
  table tr:last-child td:first-child {
      border-bottom-left-radius:3px;
  }
  table tr:last-child td:last-child {
      border-bottom-right-radius:3px;
  }
  table tr:hover td {
      background: #f2f2f2;
  
  }
  table th, table td {
      width: 160px;
  
  }
  #wrapper {
      width: 740px;
      height: 200px;
      overflow-x: scroll;
      overflow-y: scroll;
  }
  table thead {
      position: fixed;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="wrapper"&gt;
  &lt;table&gt;
  
      &lt;!-- Table Header --&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Task Details&lt;/th&gt;
              &lt;th&gt;Firstname&lt;/th&gt;
              &lt;th&gt;Lastname&lt;/th&gt;
              &lt;th&gt;Progress&lt;/th&gt;
              &lt;th&gt;Vital Task&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;!-- Table Header --&gt;
  
      &lt;!-- Table Body --&gt;
      &lt;tbody&gt;
  
          &lt;tr&gt;
              &lt;td&gt;Create pretty table design&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;100%&lt;/td&gt;
              &lt;td&gt;Yes&lt;/td&gt;
          &lt;/tr&gt;&lt;!-- Table Row --&gt;
  
          &lt;tr&gt;
              &lt;td&gt;Take the dog for a walk&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;100%&lt;/td&gt;
              &lt;td&gt;Yes&lt;/td&gt;
          &lt;/tr&gt;&lt;!-- Darker Table Row --&gt;
  
          &lt;tr&gt;
              &lt;td&gt;Waste half the day on Twitter&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;20%&lt;/td&gt;
              &lt;td&gt;No&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;Feel inferior after viewing Dribble&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;80%&lt;/td&gt;
              &lt;td&gt;No&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;Wince at &amp;quot;to do&amp;quot; list&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;100%&lt;/td&gt;
              &lt;td&gt;Yes&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;Vow to complete personal project&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;23%&lt;/td&gt;
              &lt;td&gt;yes&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;Procrastinate&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;80%&lt;/td&gt;
              &lt;td&gt;No&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&lt;a href="#yep-iit-doesnt-exist"&gt;Hyperlink Example&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;80%&lt;/td&gt;
              &lt;td&gt;&lt;a href="#inexistent-id"&gt;Another&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/tbody&gt;
      &lt;!-- Table Body --&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>