Question

I’m a bit new to CSS/html. I am trying to include this jquery plugin using tablesorter that basically lets your columns sort. It looks to change the class type when the header of the table is clicked on to sort the column in ascending/descending order. I’m trying to follow this tutorial: http://weblogs.asp.net/hajan/archive/2011/02/09/table-sorting-amp-pagination-with-jquery-in-asp-net-mvc.aspx

So in one of my columns, it doesn’t make sense to be able to sort since it’s all the same. I’m starting with a asp.net/mvc3 application and I’m referring to the last column where you can click on “Details.” Since this doesn’t change I’d like to not have the up/down arrows in that column. The original css looks like:

table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 11pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 10pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-image: url(themes/base/images/bg.gif);
    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 {
    background-image: url(themes/base/images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(themes/base/images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}

So I thought I could add:

table.tablesorter thead .nostyle {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background-color: #8dbdd8;
}

And then in the header I don’t want style, do:

            <th class="#nostyle"></th>

But that doesn’t work. Am I going about this correctly? Or is there a better way? Thanks!

Answer 1

because your class isn’t right. class #nostyle does not match .nostyle. .nostyle matches elements with class="nostyle"

<th class="nostyle"></th>