Question

我对CSS / html有点新鲜。我试图使用tablesorter包含这个jquery插件，基本上让你的列排序。当单击表的标题以按升序/降序对列进行排序时，它会查找更改类类型。我正在尝试遵循本教程：http://weblogs.asp.net/hajan/archive/2011/02/09/table-sorting-amp-pagination-with-jquery-in-asp-net-mvc.aspx

因此，在我的一个专栏中，能够排序是没有意义的，因为它完全相同。我从一个asp.net/mvc3应用程序开始，我指的是你可以点击“详细信息”的最后一列。由于这没有改变，我希望在该列中没有向上/向下箭头。原来的CSS看起来像：

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;
}

所以我想我可以补充一下：

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

然后在标题中我不想要样式，请执行：

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

但这不起作用。我正确地谈到这个吗？或者，还有更好的方法？谢谢！

Answer 1

因为你的班级不对。班级#nostyle与.nostyle不符。 .nostyle与class="nostyle"

的元素匹配

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

Answer 2

为什么不简单地禁用那些列上的排序？

http://tablesorter.com/docs/#Configuration

查找“标题”设置：

headers Object null每列控件的指令对象，格式为：headers：{0：{option：setting}，...}例如，禁用对表的前两列的排序：headers ：{0：{sorter：false}，1：{sorter：false}}

Answer 3

如果您使用

table.tablesorter thead .nostyle

你的课程应该是'nostyle'而不是'#nostyle'，例如：

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

覆盖特定列的元素中的CSS样式

3 个答案: