title: How can I change the table header color and text color?
body: <p>At first the example looked easy to be changed because the author commented throughout the code, but now I'm stuck, I can't change the color of the header and the color of the header text.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*the following HTML and body rule sets are required only if using a % width or height*/
  /*html {
    width: 100%;
    height: 100%;
  }*/
  body {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 20px 0 20px;
    text-align: center;
  }
  .scrollingtable {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    width: auto; /*if you want a fixed width, set it here, else set to auto*/
    min-width: 100%; /*if you want a % width, set it here, else set to 0*/
    height: 100%; /*set table height here; can be fixed value or %*/
    min-height: 100%/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 16px;
    line-height: 20px;
    padding: 20px 0 20px 0; /*need enough padding to make room for caption*/
    text-align: left;
  }
  .scrollingtable * {box-sizing: border-box;}
  .scrollingtable &gt; div {
    position: relative;
    border-top: 1px solid white; /*The header's border-top*/
    height: 100%;
    padding-top: 20px; /*this determines column header height*/
  }
  .scrollingtable &gt; div:before {
    top: 0;
    background: #9BC2E6; /*header row background color | header color*/
  }
  .scrollingtable &gt; div:before,
  .scrollingtable &gt; div &gt; div:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
  }
  .scrollingtable &gt; div &gt; div {
    min-height: 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/
    max-height: 100%;
    overflow: scroll/*auto*/; /*set to auto if using fixed or % width; else scroll*/
    overflow-x: hidden;
    border: 1px solid #9BC2E6; /*border around table body*/
  }
  .scrollingtable &gt; div &gt; div:after {background: white;} /*match page background color*/
  .scrollingtable &gt; div &gt; div &gt; table {
    width: 100%;
    border-spacing: 0;
    margin-top: -20px; /*inverse of column header height*/
    /*margin-right: 17px;*/ /*uncomment if using % width*/
  }
  .scrollingtable &gt; div &gt; div &gt; table &gt; caption {
    position: absolute;
    top: -20px; /*inverse of caption height*/
    margin-top: -1px; /*inverse of border-width*/
    width: 100%;
    font-weight: bold;
    text-align: center;
  }
  .scrollingtable &gt; div &gt; div &gt; table &gt; * &gt; tr &gt; * {padding: 0;}
  .scrollingtable &gt; div &gt; div &gt; table &gt; thead {
    vertical-align: bottom;
    white-space: nowrap;
    text-align: center;
  }
  .scrollingtable &gt; div &gt; div &gt; table &gt; thead &gt; tr &gt; * &gt; div {
    display: inline-block;
    padding: 0 6px 0 6px; /*header cell padding*/
  }
  .scrollingtable &gt; div &gt; div &gt; table &gt; thead &gt; tr &gt; :first-child:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 20px; /*match column header height*/
    border-left: 1px solid #9BC2E6; /*leftmost header border*/
  }
  .scrollingtable &gt; div &gt; div &gt; table &gt; thead &gt; tr &gt; * &gt; div[label]:before,
  .scrollingtable &gt; div &gt; div &gt; table &gt; thead &gt; tr &gt; * &gt; div &gt; div:first-child,
  .scrollingtable &gt; div &gt; div &gt; table &gt; thead &gt; tr &gt; * + :before {
    position: absolute;
    top: 0;
    white-space: pre-wrap;
    color: white; /*header row font color*/
  }
  .scrollingtable &gt; div &gt; div &gt; table &gt; thead &gt; tr &gt; * &gt; div[label]:before,
  .scrollingtable &gt; div &gt; div &gt; table &gt; thead &gt; tr &gt; * &gt; div[label]:after {content: attr(label);}
  .scrollingtable &gt; div &gt; div &gt; table &gt; thead &gt; tr &gt; * + :before {
    content: "";
    display: block;
    min-height: 20px; /*match column header height*/
    padding-top: 1px;
    border-left: 2px solid white; /*borders between header cells*/
  }
  .scrollingtable .scrollbarhead {float: right;}
  .scrollingtable .scrollbarhead:before {
    position: absolute;
    width: 100px;
    top: -1px; /*inverse border-width*/
    background: white; /*match page background color | Right corner*/ 
  }
  .scrollingtable &gt; div &gt; div &gt; table &gt; tbody &gt; tr:after {
    content: "";
    display: table-cell;
    position: relative;
    padding: 0;
    border-top: 1px solid white; /*Can become an issue if handled badly*/
    top: -1px; /*inverse of border width*/
  }
  .scrollingtable &gt; div &gt; div &gt; table &gt; tbody {vertical-align: top;}
  .scrollingtable &gt; div &gt; div &gt; table &gt; tbody &gt; tr {background: white;} /*White lines*/
  .scrollingtable &gt; div &gt; div &gt; table &gt; tbody &gt; tr &gt; * {
    border-bottom: 1px solid white; /*Horizontal lines*/
    padding: 0 6px 0 6px;
    height: 20px; /*match column header height*/
  }
  .scrollingtable &gt; div &gt; div &gt; table &gt; tbody:last-of-type &gt; tr:last-child &gt; * {border-bottom: none;}
  .scrollingtable &gt; div &gt; div &gt; table &gt; tbody &gt; tr:nth-child(even) {background: #DDEBF7;} /*alternate row color*/
  .scrollingtable &gt; div &gt; div &gt; table &gt; tbody &gt; tr &gt; * + * {border-left: 2px solid white;} /*borders between body cells AKA columns*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--[if lte IE 9]&gt;&lt;style&gt;.scrollingtable &gt; div &gt; div &gt; table {margin-right: 17px;}&lt;/style&gt;&lt;![endif]--&gt;
  &lt;div class="scrollingtable"&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;table&gt;
          &lt;caption&gt;Central de Controle da Engenharia&lt;/caption&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;&lt;div class="header_title" label="Column 1"&gt;&lt;/div&gt;&lt;/th&gt;
              &lt;th&gt;&lt;div class="header_title" label="Column 2"&gt;&lt;/div&gt;&lt;/th&gt;
              &lt;th&gt;&lt;div class="header_title" label="Column 3"&gt;&lt;/div&gt;&lt;/th&gt;
              &lt;th&gt;
                &lt;!--more versatile way of doing column label; requires 2 identical copies of label--&gt;
                &lt;div&gt;&lt;div&gt;Column 4&lt;/div&gt;&lt;div&gt;Column 4&lt;/div&gt;&lt;/div&gt;
              &lt;/th&gt;
              &lt;th class="scrollbarhead"/&gt; &lt;!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW--&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;&lt;td&gt;Lorem ipsum&lt;/td&gt;&lt;td&gt;Dolor&lt;/td&gt;&lt;td&gt;Sit&lt;/td&gt;&lt;td&gt;Amet consectetur&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Lorem ipsum&lt;/td&gt;&lt;td&gt;Dolor&lt;/td&gt;&lt;td&gt;Sit&lt;/td&gt;&lt;td&gt;Amet consectetur&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Lorem ipsum&lt;/td&gt;&lt;td&gt;Dolor&lt;/td&gt;&lt;td&gt;Sit&lt;/td&gt;&lt;td&gt;Amet consectetur&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Lorem ipsum&lt;/td&gt;&lt;td&gt;Dolor&lt;/td&gt;&lt;td&gt;Sit&lt;/td&gt;&lt;td&gt;Amet consectetur&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Lorem ipsum&lt;/td&gt;&lt;td&gt;Dolor&lt;/td&gt;&lt;td&gt;Sit&lt;/td&gt;&lt;td&gt;Amet consectetur&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Lorem ipsum&lt;/td&gt;&lt;td&gt;Dolor&lt;/td&gt;&lt;td&gt;Sit&lt;/td&gt;&lt;td&gt;Amet consectetur&lt;/td&gt;&lt;/tr&gt;
            &lt;tr&gt;&lt;td&gt;Lorem ipsum&lt;/td&gt;&lt;td&gt;Dolor&lt;/td&gt;&lt;td&gt;Sit&lt;/td&gt;&lt;td&gt;Amet consectetur&lt;/td&gt;&lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      Faux bottom caption
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>