I am trying to use Tablesorter with a csstablegenerator.com table. With the way tablesorter is set up, it needs thead and tbody, whereas csstablegenerator.com makes the first row in tbody the head. Can I change one of them to comply with the other? You can see the current results here and my code is here:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/test/css/search-results.css">
</head>
<div class="CSSTableGenerator">
<table>
<thead>
<tr>
<?php
foreach($mykeys as $k) {
if ($k == "name") {
$k = "Name";
}
if ($k == "category") {
$k = "Category";
}
if ($k == "color") {
$k = "Color";
}
if ($k == "size") {
$k = "Size";
}
if ($k == "currentPrice") {
$k = "Price";
}
echo "<th style='cursor:pointer'>$k<img src='/test/images/UpDown.png' width='8px' height='auto' style='margin: 0px 20px'></th>";
}
?>
</tr>
</thead>
<tbody>
<?php
foreach($phpArray as $key => $values) {
echo '<tr>';
foreach($mykeys as $k) {
$value = $k == "currentPrice" ? '$' . number_format($values[$k]/100,'2') : $values[$k];
echo "<td>" . $value . "</td>";
}
echo '</tr>';
}
?>
</tbody>
</table>
</div>
</html>
and here:
.CSSTableGenerator {
margin:0px;padding:0px;
width:550px;
box-shadow: 10px 10px 5px #888888;
border:1px solid #048a32;
-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{
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: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:#d4ffaa; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #048a32;
border-width:0px 1px 1px 0px;
text-align:left;
padding:5px;
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, #048a32 5%, #3f7f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #048a32), color-stop(1, #3f7f00) );
background:-moz-linear-gradient( center top, #048a32 5%, #3f7f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#048a32", endColorstr="#3f7f00"); background: -o-linear-gradient(top,#048a32,3f7f00);
background-color:#048a32;
border:0px solid #048a32;
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, #048a32 5%, #3f7f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #048a32), color-stop(1, #3f7f00) );
background:-moz-linear-gradient( center top, #048a32 5%, #3f7f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#048a32", endColorstr="#3f7f00"); background: -o-linear-gradient(top,#048a32,3f7f00);
background-color:#048a32;
}
.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;
}
As @AndrewBarber stated in the comments, you need to add thead to the css, and change the td to th, but only in the last four definitions you get from the CSSTableGenerator output (demo):
/*
showing only the last 4 lines of the output
add "thead" and change "td" to "th"
*/
.CSSTableGenerator thead tr:first-child th {
...
}
.CSSTableGenerator thead tr:first-child:hover th {
...
}
.CSSTableGenerator thead tr:first-child th:first-child {
...
}
.CSSTableGenerator thead tr:first-child th:last-child {
...
}