trying to apply css to an html table and its ignoring my th

Question

I am using a table sorting plugin, and my table looked like crap so i decided to try and style it.

Not being very good at css I tried to find some pre-made design online, and I found this website:

http://www.csstablegenerator.com/

I got this code for my css from there:

.CSSTableGenerator {

    margin:0px;padding:0px;

    width:100%;
    box-shadow: 10px 10px 5px #888888;

    border:1px solid #000000;



    -moz-border-radius-bottomleft:0px;

    -webkit-border-bottom-left-radius:0px;

    border-bottom-left-radius:0px;



    -moz-border-radius-bottomright:0px;

    -webkit-border-bottom-right-radius:0px;

    border-bottom-right-radius:0px;



    -moz-border-radius-topright:0px;

    -webkit-border-top-right-radius:0px;

    border-top-right-radius:0px;



    -moz-border-radius-topleft:0px;

    -webkit-border-top-left-radius:0px;

    border-top-left-radius:0px;

}.CSSTableGenerator table{

    width:100%;

    height:100%;

    margin:0px;padding:0px;

}.CSSTableGenerator tr:last-child td:last-child {

    -moz-border-radius-bottomright:0px;

    -webkit-border-bottom-right-radius:0px;

    border-bottom-right-radius:0px;

}

.CSSTableGenerator table tr:first-child td:first-child {

    -moz-border-radius-topleft:0px;

    -webkit-border-top-left-radius:0px;

    border-top-left-radius:0px;

}

.CSSTableGenerator table tr:first-child td:last-child {

    -moz-border-radius-topright:0px;

    -webkit-border-top-right-radius:0px;

    border-top-right-radius:0px;

}.CSSTableGenerator tr:last-child td:first-child{

    -moz-border-radius-bottomleft:0px;

    -webkit-border-bottom-left-radius:0px;

    border-bottom-left-radius:0px;

}.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:7px;

    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;

}

.CSSTableGenerator tr:first-child:hover 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;

}

.CSSTableGenerator tr:first-child td:first-child{

    border-width:0px 0px 1px 0px;

}

.CSSTableGenerator tr:first-child td:last-child{

    border-width:0px 0px 1px 1px;

}

The problem is they wanted to give me code for the table, but I wanted to use my own code and I am having trouble meshing the two together.

The code they wanted me to use is this:

<div class="CSSTableGenerator" >
    <table >
        <tr> 
            <td>
                Title 1
            </td>
            <td >
                Title 2
            </td>
            <td>
                Title 3
            </td>
        </tr>
        <tr>
            <td >
                Row 1
            </td>
            <td>
                Row 1
            </td>
            <td>
                Row 1
            </td>
        </tr>
        <tr>
            <td >
                Row 2
            </td>
            <td>
                Row 2
            </td>
            <td>
                Row 2
            </td>
        </tr>
        <tr>
            <td >
                Row 2
            </td>
            <td>
                Row 2
            </td>
            <td>
                Row 2
            </td>
        </tr>
        <tr>
            <td >
                Row 3
            </td>
            <td>
                Row 3
            </td>
            <td>
                Row 3
            </td>
        </tr>
    </table>
</div>

When I try and mash them together I get this:

As you can see the table header looks lie a row and the first real row looks like what the header should be...

Upon investigation I noticed the code they gave me for the pre-made table doesn't use headers... I changed mine to a td instead of a th and looked well. But I need a th because first of all its the right way to program and second of all I am using a jquery plugin to sort my tables and this breaks if I dont have a th.

Any easy way to get the css and my jquery plugin to work together. I should just have to change some of the css but I have tried a few different things and this css seems to be stubborn an dont changing easily.

Any help would be greatly appreciated, thanks!

Forgot to add my code for my table:

<table id=\"myTable\" class=\"tablesorter\" > 
<thead> 
<tr> 
    <th>Beer Name</th> 
    <th>User Rating</th> 
    <th> Your Rating</th>
</tr> 
</thead> 
<tbody>";

//database call was here, but taken out. Not important to table code



for($i = 0; $i<$FriendBeersNum;$i++){
    $row = $resultBeers->fetch_assoc();
    $fBeerName = $row['beerName'];
    $fBeerRating = $row['rating'];
    $fBeerID = $row['beerID'];

    $beerURL = "beerPage.php?id=$fBeerID";

    //another database call not needed for table help, just getting info for table


    if( $myBeerNum > 0){
        $rowMyBeer = $resultMyBeer->fetch_assoc();
        $myrating = $rowMyBeer['rating'];
    }

    else { $myrating = "N/A";}


    print "  

    <tr>   

    <td> <a href=\"$beerURL\"> $fBeerName </a>   </td>
    <td>  $fBeerRating  </td>
    <td>  $myrating    </td>

    </tr>

Answer 1

If you want the table header to look the same as the table cells, simple add the header to whatever styles you already have for the cells.

However in this example you actually want to change the existing header styles from a td to a th.

So this

.CSSTableGenerator tr:first-child td {
    styles here
}

should change to

.CSSTableGenerator tr:first-child th  {
    styles here
}

Just to tidy it up a bit you should remove .CSSTableGenerator tr:first-child:hover td and change

.CSSTableGenerator tr:first-child td:first-child {
        border-width: 0px 0px 1px 0px
}

to

.CSSTableGenerator tr:first-child td:first-child {
        border-width: 0px 1px 1px 0px
}

Here is a fiddle - http://jsfiddle.net/ajcw/r5Prz/

Answer 2

In the CSS file, replace:

.CSSTableGenerator tr:first-child td

with:

.CSSTableGenerator thead tr th

Answer 3

you need to use <th> table header tags for the titles. also change the css for :first-child tr td to :first-child tr th