css html table and its ignoring table thead?

Question

I am using below mentioned css code to display table in my posts. but it displays table head and first row in dark bule colour. my requirement is display table head only with dark color.

here is the code am using. please guide me

 .CSSTableGenerator {
    margin:0px;padding:0px;
    width:100%;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #000000;

    -moz-border-radius-bottomleft:20px;
    -webkit-border-bottom-left-radius:20px;
    border-bottom-left-radius:20px;

    -moz-border-radius-bottomright:20px;
    -webkit-border-bottom-right-radius:20px;
    border-bottom-right-radius:20px;

    -moz-border-radius-topright:20px;
    -webkit-border-top-right-radius:20px;
    border-top-right-radius:20px;

    -moz-border-radius-topleft:20px;
    -webkit-border-top-left-radius:20px;
    border-top-left-radius:20px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
    -moz-border-radius-bottomright:20px;
    -webkit-border-bottom-right-radius:20px;
    border-bottom-right-radius:20px;
}
.CSSTableGenerator table tr:first-child td:first-child {
    -moz-border-radius-topleft:20px;
    -webkit-border-top-left-radius:20px;
    border-top-left-radius:20px;
}
.CSSTableGenerator table tr:first-child td:last-child {
    -moz-border-radius-topright:20px;
    -webkit-border-top-right-radius:20px;
    border-top-right-radius:20px;
}.CSSTableGenerator tr:last-child td:first-child{
    -moz-border-radius-bottomleft:20px;
    -webkit-border-bottom-left-radius:20px;
    border-bottom-left-radius:20px;
}.CSSTableGenerator tr:hover td{

}
.CSSTableGenerator tr:nth-child(odd){ background-color:#aad4ff; }
.CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
    vertical-align:middle;


    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:11px;
    font-size:10px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
}.CSSTableGenerator tr:last-child td{
    border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
    border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
        background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
    background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f");  background: -o-linear-gradient(top,#005fbf,003f7f);

    background-color:#005fbf;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:14px;
    font-family:Arial;
    font-weight:bold;
    color:#ffffff;
}

Answer 1

Use <thead> html tag in your <table> then give it styles given to .CSSTableGenerator tr:first-child td such as below.

.CSSTableGenerator {
  margin: 0px;
  padding: 0px;
  width: 100%;
  box-shadow: 10px 10px 5px #888888;
  border: 1px solid #000000;
  overflow: hidden;
  -moz-border-radius-bottomleft: 20px;
  -webkit-border-bottom-left-radius: 20px;
  border-bottom-left-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  -webkit-border-bottom-right-radius: 20px;
  border-bottom-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  -webkit-border-top-right-radius: 20px;
  border-top-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -webkit-border-top-left-radius: 20px;
  border-top-left-radius: 20px;
}
.CSSTableGenerator table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.CSSTableGenerator tr:last-child td:last-child {
  -moz-border-radius-bottomright: 20px;
  -webkit-border-bottom-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.CSSTableGenerator table thead {
  -moz-border-radius-topleft: 20px;
  -webkit-border-top-left-radius: 20px;
  border-top-left-radius: 20px;
}
}
.CSSTableGenerator tr:last-child td:first-child {
  -moz-border-radius-bottomleft: 20px;
  -webkit-border-bottom-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.CSSTableGenerator tr:hover td {} .CSSTableGenerator tr:nth-child(odd) {
  background-color: #aad4ff;
}
.CSSTableGenerator tr:nth-child(even) {
  background-color: #ffffff;
}
.CSSTableGenerator th,
.CSSTableGenerator td {
  vertical-align: middle;
  border: 1px solid #000000;
  border-width: 0px 1px 1px 0px;
  text-align: left;
  padding: 11px;
  font-size: 10px;
  font-family: Arial;
  font-weight: normal;
  color: #000000;
}
.CSSTableGenerator tr:last-child td {
  border-width: 0px 1px 0px 0px;
}
.CSSTableGenerator tr td:last-child {
  border-width: 0px 0px 1px 0px;
}
.CSSTableGenerator tr:last-child td:last-child {
  border-width: 0px 0px 0px 0px;
}
.CSSTableGenerator thead th {
  background: -o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f));
  background: -moz-linear-gradient(center top, #005fbf 5%, #003f7f 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f");
  background: -o-linear-gradient(top, #005fbf, 003f7f);
  background-color: #005fbf;
  border: 0px solid #000000;
  text-align: center;
  border-width: 0px 0px 1px 1px;
  font-size: 14px;
  font-family: Arial;
  font-weight: bold;
  color: #ffffff;
}

<div class="CSSTableGenerator">
  <table>
    <thead>
      <tr>
        <th>col1</th>
        <th>col2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>etc</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

To style only cells in the table head, simply do like this

table thead tr {
  color: white;
  background: black;
}

<table>
  <thead>
    <tr>
      <td>
        I'm white on black
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>I'm black on white
      </td>
    </tr>
  </tbody>
</table>