Can't :hover whole line of a table - html

When I pass mouse over a cell of the table, I want to highlight the whole line! But with the code that I have all I can to highlight just one cell! This is my table:
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bach</td>
<td>42526</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Doe</td>
<td>243155</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
<tr>
<td>Conway</td>
<td>35263</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
</tbody>
</table>
and css is
/*Table sort*/
table.tablesorter {
font-family:arial;
background-color: #e6EEEE;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
}
table.tablesorter thead tr .headerSortDown {
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
/*background-color: #8dbdd8;*/
background-color: #e6EEEE;
}
table.tablesorter tbody tr :hover {
background: #8dbdd8;
}
What is missing in my CSS to highlight whole line?

You simply need to remove a space in your selector:
table.tablesorter tbody tr:hover
/* ^ space was removed */
Because you left a comment saying "it's not working":
See here, where it works: http://jsfiddle.net/thirtydot/Pe6Xe/
Per your edit, this will work:
table.tablesorter tbody tr:hover td {
background: #8dbdd8;
}
The issue was that the background-color on your tds was covering the changed background-color on the tr hover.
See: http://jsfiddle.net/thirtydot/Pe6Xe/1/

You need to remove the space between tr and :hover. As in, change this:
tr :hover
to:
tr:hover

Related

How to change table to different style at same page

I want to use this table style at same page with another one, but always other one control this one, so please can you change this for me to become different style. Please would you mind to make it with a Jsfiddle example.
Here my CSS:
body {
color: #555;
font-family: 'Open Sans';
}
th {
text-align: left;
}
table {
background-color: transparent;
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: separate;
border-spacing: 0 7px;
}
table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
padding: 13px;
line-height: 20px;
}
table th {
font-weight: 700;
font-size: 13px;
color: #868686;
vertical-align: bottom;
padding: 0 13px !important;
}
table td {
vertical-align: middle;
background: #fff;
border: 1px solid #eaeaea;
border-right: 0;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
transition: all .2s ease;
font-size: 13px;
}
table td:last-child {
border-right: 1px solid #eaeaea;
border-radius: 0 2px 2px 0;
}
table td:first-child {
border-radius: 2px 0 0 2px;
}
table > thead > tr > th {
vertical-align: bottom;
}
table > caption + thead > tr:first-child > th,
table > colgroup + thead > tr:first-child > th,
table > thead:first-child > tr:first-child > th,
table > caption + thead > tr:first-child > td,
table > colgroup + thead > tr:first-child > td,
table > thead:first-child > tr:first-child > td {
border: 0;
}
table > tbody > tr:hover > td,
table > tbody > tr:hover > th {
background-color: #f7f8fb;
}
Here my HTML:
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20">1</td>
<td>Obcasyn Maruszczak</td>
<td>obcasyn#example.com</td>
<td>No comment</td>
</tr>
<tr>
<td>2</td>
<td>Obcasyn Maruszczakowy</td>
<td>maruszczak#example.com</td>
<td>No comment</td>
</tr>
<tr>
<td>3</td>
<td>Obcasyn Maruszczakowy</td>
<td>maruszczak#example.com</td>
<td>No comment</td>
</tr>
</tbody>
</table>
Give them the same class (say "tables") and different ids (say "tableOne" and "tableTwo")
Declare the common css for them using their class, like table.tables{ }. For different css use their ids; like this :
table.tables#tableOne th {
color:green;
}
table.tables#tableTwo th {
color: red;
}
Here's a wokring snippet in which I give their headings different colors using their ids.
body {
color: #555;
font-family: 'Open Sans';
}
th {
text-align: left;
}
table.tables {
background-color: transparent;
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: separate;
border-spacing: 0 7px;
}
table.tables > thead > tr > th,
table.tables > tbody > tr > th,
table.tables > tfoot > tr > th,
table.tables > thead > tr > td,
table.tables > tbody > tr > td,
table.tables > tfoot > tr > td {
padding: 13px;
line-height: 20px;
}
table.tables th {
font-weight: 700;
font-size: 13px;
color: #868686;
vertical-align: bottom;
padding: 0 13px !important;
}
table.tables td {
vertical-align: middle;
background: #fff;
border: 1px solid #eaeaea;
border-right: 0;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
transition: all .2s ease;
font-size: 13px;
}
table.tables td:last-child {
border-right: 1px solid #eaeaea;
border-radius: 0 2px 2px 0;
}
table.tables td:first-child {
border-radius: 2px 0 0 2px;
}
table.tables > thead > tr > th {
vertical-align: bottom;
}
table.tables > caption + thead > tr:first-child > th,
table.tables > colgroup + thead > tr:first-child > th,
table.tables > thead:first-child > tr:first-child > th,
table.tables > caption + thead > tr:first-child > td,
table.tables > colgroup + thead > tr:first-child > td,
table.tables > thead:first-child > tr:first-child > td {
border: 0;
}
table.tables > tbody > tr:hover > td,
table.tables > tbody > tr:hover > th {
background-color: #f7f8fb;
}
table.tables#tableOne th {
color:green;
}
table.tables#tableTwo th {
color: red;
}
<table class="tables" id="tableOne">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20">1</td>
<td>Obcasyn Maruszczak</td>
<td>obcasyn#example.com</td>
<td>No comment</td>
</tr>
</tbody>
</table>
<table class="tables" id="tableTwo">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20">1</td>
<td>Obcasyn Maruszczak</td>
<td>obcasyn#example.com</td>
<td>No comment</td>
</tr>
</tbody>
</table>

Firefox table cell width completly different than Chrome's

I have a problem with my table cell width. On Chrome it works perfectly, but on Firefox it looks a lot different and I don't whats causing it.
This is the chrome one, looking perfect:
This is the Firefox one, being squeezed tight:
Any idea why this is? Heres my code.
/* Latest games */
.lp-latestgames {
height: 466px;
}
.lp-latestgames .title {
margin-left: 460px;
margin-top: 56px;
margin-bottom: 21px;
}
.lp-latestgames .table {
margin-bottom: 0;
}
.lp-latestgames .table thead {
background-color: rgba(0, 0, 0, 0.45);
}
.lp-latestgames .table thead th {
font-size: 16px;
font-weight: 500 !important;
color: white;
height: 49px;
vertical-align: middle;
}
.lp-latestgames .table thead > tr > th { border-bottom: none; }
.lp-latestgames .table tbody > tr > td {
height: 81px;
border-top: 2px solid #111316;
background-color: rgba(0, 0, 0, 0.19);
vertical-align: middle;
font-size: 14px;
font-weight: 500;
color: white;
}
.lp-latestgames .table tbody > tr:first-child > td { border-top: none; }
.lp-latestgames .table tbody > tr > td:first-child,
.lp-latestgames .table thead > tr > th:first-child{
/* ÜBERARBEITEN!!!!! */
padding-left: 460px;
max-width: 200px;
}
.lp-latestgames .table tbody > tr > td:last-child,
.lp-latestgames .table thead > tr > th:last-child{
/* ÜBERARBEITEN!!!!! */
padding-right: 460px;
max-width: 200px;
}
.lp-latestgames .table tbody > tr > td > .gd-c-versus {
display: block;
font-weight: normal;
font-family: Arial;
color: #494949;
}
.lp-latestgames .table thead > tr > th:nth-child(4),
.lp-latestgames .table thead > tr > th:nth-child(5),
.lp-latestgames .table tbody > tr > td:nth-child(4),
.lp-latestgames .table tbody > tr > td:nth-child(5) {
text-align: center;
}
<div class="lp-latestgames">
<!-- Games -->
<table class="table">
<thead>
<tr>
<th>Name <img src="img/gd_content_arrow_dn.png"></th>
<th>Price Pool <img src="img/gd_content_arrow_dn.png"></th>
<th>Entry <img src="img/gd_content_arrow_dn.png"></th>
<th>Avg Skill <img src="img/gd_content_arrow_dn.png"></th>
<th>Time Remaining <img src="img/gd_content_arrow_up.png"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Im bored. Fite me<span class="gd-c-versus">1 vs 1</span></td>
<td><img src="img/gd_content_coin.png"> 20</td>
<td><img src="img/gd_content_coin.png"> 10</td>
<td><input type="text" value="730" class="circle"></td>
<td>00:00:32</td>
</tr>
<tr>
<td>EG vs LGD - Wild Cards Entry<span class="gd-c-versus">5 vs 5</span></td>
<td><img src="img/gd_content_coin.png"> 1.500.000</td>
<td><img src="img/gd_content_coin.png"> 20</td>
<td><input type="text" value="980" class="circle"></td>
<td>00:01:47</td>
</tr>
<tr>
<td>cyka blyat<span class="gd-c-versus">5 vs 5</span></td>
<td><img src="img/gd_content_coin.png"> 20</td>
<td><img src="img/gd_content_coin.png"> 10</td>
<td><input type="text" value="730" class="circle"></td>
<td>00:02:4</td>
</tr>
</tbody>
</table>
</div>
Have you declared <!DOCTYPE> in your html page, if not give it a try. This doctype is an instruction to the web browser about what version of HTML the page is written in.
Try adding this:
.table { table-layout: fixed }
See snippet
See POST
/* Latest games */
.lp-latestgames {
height: 466px;
}
.lp-latestgames .title {
margin-left: 460px;
margin-top: 56px;
margin-bottom: 21px;
}
.lp-latestgames .table {
margin-bottom: 0;
table-layout: fixed; /*<<<===== ADD THIS RULE RIGHT HERE */
}
.lp-latestgames .table thead {
background-color: rgba(0, 0, 0, 0.45);
}
.lp-latestgames .table thead th {
font-size: 16px;
font-weight: 500 !important;
color: white;
height: 49px;
vertical-align: middle;
}
.lp-latestgames .table thead > tr > th {
border-bottom: none;
}
.lp-latestgames .table tbody > tr > td {
height: 81px;
border-top: 2px solid #111316;
background-color: rgba(0, 0, 0, 0.19);
vertical-align: middle;
font-size: 14px;
font-weight: 500;
color: white;
}
.lp-latestgames .table tbody > tr:first-child > td {
border-top: none;
}
.lp-latestgames .table tbody > tr > td:first-child,
.lp-latestgames .table thead > tr > th:first-child {
/* ÜBERARBEITEN!!!!! */
padding-left: 460px;
max-width: 200px;
}
.lp-latestgames .table tbody > tr > td:last-child,
.lp-latestgames .table thead > tr > th:last-child {
/* ÜBERARBEITEN!!!!! */
padding-right: 460px;
max-width: 200px;
}
.lp-latestgames .table tbody > tr > td > .gd-c-versus {
display: block;
font-weight: normal;
font-family: Arial;
color: #494949;
}
.lp-latestgames .table thead > tr > th:nth-child(4),
.lp-latestgames .table thead > tr > th:nth-child(5),
.lp-latestgames .table tbody > tr > td:nth-child(4),
.lp-latestgames .table tbody > tr > td:nth-child(5) {
text-align: center;
}
<div class="lp-latestgames">
<!-- Games -->
<table class="table">
<thead>
<tr>
<th>Name
<img src="img/gd_content_arrow_dn.png">
</th>
<th>Price Pool
<img src="img/gd_content_arrow_dn.png">
</th>
<th>Entry
<img src="img/gd_content_arrow_dn.png">
</th>
<th>Avg Skill
<img src="img/gd_content_arrow_dn.png">
</th>
<th>Time Remaining
<img src="img/gd_content_arrow_up.png">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Im bored. Fite me<span class="gd-c-versus">1 vs 1</span>
</td>
<td>
<img src="img/gd_content_coin.png">20</td>
<td>
<img src="img/gd_content_coin.png">10</td>
<td>
<input type="text" value="730" class="circle">
</td>
<td>00:00:32</td>
</tr>
<tr>
<td>EG vs LGD - Wild Cards Entry<span class="gd-c-versus">5 vs 5</span>
</td>
<td>
<img src="img/gd_content_coin.png">1.500.000</td>
<td>
<img src="img/gd_content_coin.png">20</td>
<td>
<input type="text" value="980" class="circle">
</td>
<td>00:01:47</td>
</tr>
<tr>
<td>cyka blyat<span class="gd-c-versus">5 vs 5</span>
</td>
<td>
<img src="img/gd_content_coin.png">20</td>
<td>
<img src="img/gd_content_coin.png">10</td>
<td>
<input type="text" value="730" class="circle">
</td>
<td>00:02:4</td>
</tr>
</tbody>
</table>
</div>
Try to set th or td width using rem instead of px
Each rem equals 16px

Left or right aligning text in the center of a table cell

I'd like to have a table that has the text in the middle of a cell. But the text inside the cell and the heading all need to be left or right aligned to the other text in the other cells.
The reason I need the text in the center of the cell is because some of the table cells get highlighted and it looks a bit silly having the text sitting on the edge.
Have a look at the image below to see what I mean:
Here's a JSfiddle:
http://jsfiddle.net/php58knw/1/
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$1</title>
</head>
<style type="text/css">
table {
max-width: 100%;
background-color: white;
}
th {
text-align: left;
}
.table {
width: 100%;
margin-bottom: 10px;
}
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
padding: 20px;
line-height: 20px;
vertical-align: top;
border-top: 1px solid black;
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid black;
}
.table > caption + thead > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
}
.table > tbody + tbody {
border-top: 2px solid black;
}
.table .table {
background-color: white;
}
.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td {
padding: 10px;
}
.table-bordered {
border: 1px solid black;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
border: 1px solid black;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: green;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: orange;
}
table col[class*="col-"] {
position: static;
float: none;
display: table-column;
}
table td[class*="col-"],
table th[class*="col-"] {
position: static;
float: none;
display: table-cell;
}
.table-number {
text-align: left;
font-weight: 600;
font-size: 14px;
color: #545454;
}
.table-heading {
text-align: left;
color: red;
font-size: 30px;
}
table.table {
margin-top: 20px;
color: #3c3c3c;
table-layout: fixed;
}
table.table thead tr th {
text-align: center;
font-weight: 400;
}
table.table tbody tr td {
border: none;
color: #989898;
border-top: none;
line-height: 2;
}
table.table tbody tr td:first-child {
color: #000;
text-align: right;
}
table.table tbody tr td.num, table.table tbody tr td.perc, table.table tbody tr td.curr {
font-family: "Roboto";
font-weight: 400;
text-align: center;
}
table.table tbody tr td.num.highlight, table.table tbody tr td.perc.highlight, table.table tbody tr td.curr.highlight {
background-color: #ff8080;
text-shadow: 0.5px 0.866px 1px rgba(0, 0, 0, 0.25);
color: #FFF;
}
table.table tbody tr td.num.highlight-alt, table.table tbody tr td.perc.highlight-alt, table.table tbody tr td.curr.highlight-alt {
background-color: #8080ff;
text-shadow: 0.5px 0.866px 1px rgba(0, 0, 0, 0.25);
color: #FFF;
}
</style>
<div class="table-container">
<div class="table-number">Table 1:</div>
<div class="table-heading">Developed world tobacco industry: 1973-2010</div>
<table class="table">
<thead>
<tr>
<th></th>
<th>Volume p.a.</th>
<th>Real price p.a.</th>
<th>Real revenue p.a.</th>
<th>Real GDP p.a.</th>
<th>Period</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States</td>
<td class="perc">-1.5%</td>
<td class="perc">3.4%</td>
<td class="perc">1.9%</td>
<td class="perc">2.8%</td>
<td class="num">1,973</td>
</tr>
<tr>
<td>Australia</td>
<td class="perc">-1.9%</td>
<td class="curr highlight">$9,999.00</td>
<td class="curr">R5,000.00</td>
<td class="curr">R5,000.00</td>
<td class="num">1,973</td>
</tr>
<tr>
<td>UK</td>
<td class="perc">-1.0%</td>
<td class="perc">3.0%</td>
<td class="perc">1.3%</td>
<td class="perc highlight-alt">2.0%</td>
<td class="num">1,988</td>
</tr>
<tr>
<td>Average</td>
<td class="perc highlight">-1.4%</td>
<td class="perc highlight">3.6%</td>
<td class="perc">1.8%</td>
<td class="perc">2.7%</td>
<td class="num">0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
try
table.table tbody tr td.perc, table.table tbody tr th,
table.table tbody tr td.num, table.table tbody tr td.curr {
text-align: right;
padding-right: 5%;
}
http://jsfiddle.net/n20h0vdL/

competing CSS stylesheets

I'm trying to remove the borders on a specific table:
<table class="teacher">
<tr>
<td>row 1</td>
<td>col 1</td>
<td>col 2</td>
</tr>
<tr>
<td>row 2</td>
<td>col 1</td>
<td>col 2</td>
</tr>
</table>
You can see my fiddle here
I think the bootstrap.css is competing with my site.css but I'm not sure how to get rid of the borders?
Here is my teacher (from site.css) styling:
.teacher {
text-align: left;
padding: 0;
}
.teacher table {
border: none !important;
border-collapse:collapse !important;
}
.teacher .contentLabel {
width: 45%;
}
.teacher input {
width: 10px;
padding: 0px;
}
.teacher textarea {
width: 225px;
padding: 0px;
}
My bundle:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css",
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css",
"~/Content/bootstrap-duallistbox.css",
"~/Content/jquery.dataTables.css"));
I think this is what is causing this issue from bootstrap:
.table {
width: 100%;
margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #ddd;
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
}
.table > tbody + tbody {
border-top: 2px solid #ddd;
}
.table .table {
background-color: #fff;
}
Comment out the border for <td> in Line 94.
td {
color: #000;
/* border: 1px solid #7c7c7b; */
padding: .3em 1em;
text-align: left;
}
Additional pieces of CSS to keep in mind if you ever use <thead> and <th> elements for tables:
Line 103:
th {
color: #7c7c7b;
font-weight: 700;
font-size: large;
text-align: center;
/* border: 1px solid #7c7c7b; */
padding: .3em 1em;
}
Line 112:
th.th2 {
color: #7c7c7b;
font-weight: 300;
font-size: large;
text-align: center;
/* border: 1px solid #7c7c7b; */
padding: .3em 1em;
}
Well on line 90 in the CSS of the jsfiddle you provided is
td {
color: #000;
border: 1px solid #7c7c7b;
padding: .3em 1em;
text-align: left;
}
that is what is causing the borders..
So the rule is on the td elements and not the table
Using
.teacher td{border:none;}
should solve it..
Demo at http://jsfiddle.net/gaby/R6X2M/2/

How can I style the thead and tbody for this page?

I have an HTML page with the CSS included. The CSS works for certain parts of the page, but not the parts I discuss. I want to have a background color and make a few other style changes, but they aren't implementing.
Here is the CSS:
table.tablesorter thead tr, table.tablesorter thead tr th, table.tablesorter tfoot tr th { background-color: #e6EEEE; font-size: 8pt; padding: 4px; }
table.tablesorter thead tr .header { cursor: pointer; }
table.tablesorter tbody td { padding: 6px; vertical-align: top; border-bottom: dashed 1px #333; }
table.tablesorter tbody tr.odd td { background-color: #F0F0F6; }
table.tablesorter thead tr .headerSortUp { background-image: url(images/asc.gif) no-repeat; }
table.tablesorter thead tr .headerSortDown { background-image: url(images/desc.gif) no-repeat; }
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { background-color: #8dbdd8; }
Here is the HTML:
<table>
<thead>
<tr>
<th>Pilot ID</th>
<th>Rank</th>
<th>Total Flights</th>
<th>Total Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><?php echo $pilotcode; ?></td>
<td align="center"><?php echo $userinfo->rank;?></td>
<?php
if($report)
{ ?>
<!--<td><strong>Latest Flight: </strong><a
href="<?php echo url('pireps/view/'.$report->pirepid); ?>">
<?php echo $report->code . $report->flightnum; ?></a>
</td>-->
<?php
}
?>
<td align="center"><?php echo $userinfo->totalflights?></td>
<td align="center"><?php echo $userinfo->totalhours; ?></td>
</tr>
</table>
All this results in is bold text with plain text below it.
Your CSS is applying the styles to a table with the class tablesorter. Simply add this to the table tag
<table class='tablesorter'>
table content
</table>
Demo