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>
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
tdto ath.So this
should change to
Just to tidy it up a bit you should remove
.CSSTableGenerator tr:first-child:hover tdand changeto
Here is a fiddle – http://jsfiddle.net/ajcw/r5Prz/