1

我有一个关于我很久以前创建的表的问题。

我有一张桌子，可排序的列有蓝色背景。我想在这个表中添加另一个类，比如“sortable-table-white-bg”，当它添加到表中时会删除蓝色背景/将白色背景添加到可排序的列中。

我的表格代码如下： 

 <table cellspacing="0" cellpadding="0" border="0" class="data-table sortable-table "
summary="JavaScript enabled sortable data table example">
    <caption><em>Sortable data table</em></caption>
    <thead>
        <tr>
            <th scope="col">Header 1</th>
            <th scope="col" class="abc-sort">
                <a href="#sort">
                    <span>Header 2</span>
                    <span class="abc-icon">&nbsp;</span>
                </a>
            </th>
            <th scope="col" class="abc-numeric abc-sort">
                <a href="#sort">
                    <span>Header 3</span>
                    <span class="abc-icon">&nbsp;</span>
                </a>
            </th>
            <th scope="col" class="abc-date abc-sort">
                <a href="#sort">
                    <span>Header 4</span>
                    <span class="abc-icon">&nbsp;</span>
                </a>
            </th>
            <th scope="col">Header 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" class="abc-table-row">This is a sample text</th>
            <td>Duis autem</td>
            <td class="abc-numeric">$1,234.56</td>
            <td>12 Dec 1999</td>
            <td>Ipsum dolor</td>
        </tr>
        <tr>
            <th scope="row" class="abc-table-row">This is a sample text</th>
            <td>Quis nostrud</td>
            <td class="abc-numeric">$789.10</td>
            <td>25 Jul 2007</td>
            <td>Adipscing</td>
        </tr>
        <tr>
            <th scope="row" class="abc-table-row">This is a sample text</th>
            <td>Magna diam</td>
            <td class="abc-numeric">$1,112.13</td>
            <td>01 Jan 2000</td>
            <td>Sed diam</td>
        </tr>
    </tbody>
</table>

表格的 CSS 是：

table.data-table.sortable-table td.accent{
    background-color: #eeeeee;
}

table.data-table td.abc-sort-column{
    background:url(/i/v17/table_sort_col_background.gif) repeat-x 0px 0px ;

}

table.data-table tbody tr:first-child td.abc-sort-column{
    background: url(/i/v17/table_sort_col_background_child.gif) repeat 0 0 !important;
}

当我们将“sortable-table-white-bg”类添加到表中时，我将 CSS 更改为

  table.data-table.sortable-table td.accent{
    background-color: #eeeeee;
}

table.sortable-table-white-bg td.abc-sort-column{
    background-color: #ffffff;

}

table.data-table td.abc-sort-column{
    background:url(/i/v17/table_sort_col_background.gif) repeat-x 0px 0px ;

}

table.sortable-table-white-bg tbody tr:first-child td.abc-sort-column{
    background-color: #ffffff ;

}

table.data-table tbody tr:first-child td.abc-sort-column{
    background: url(/i/v17/table_sort_col_background_child.gif) repeat 0 0 !important;
}

什么都没有改变...我仍然看到相同的蓝色背景。

请帮我解决这个问题。

提前致谢

4

2 回答 2

0

是因为您使用 bot 类作为 table.data-table 和 table.sortable-table-white-bg。你的代码：

<table cellspacing="0" cellpadding="0" border="0" class="data-table sortable-table "
summary="JavaScript enabled sortable data table example">

您应该在 css 文件中只定义没有表的类。例子：

.sortable-table-white-bg {  }
.data-table {  }

或者您有一个脚本或一个类正在重写您的特定 css 类

于 2012-09-03T12:31:11.313 回答
0

这是由几件事造成的。

  1. CSS 引用了名为的类abc-sort-column，但 HTML 中没有任何元素具有该类。相反，HTML 仅包含名为abc-sort. 可能的解决方法是更改abc-sort-column​​为abc-sort在 CSS 中或 abc-sort在abc-sort-columnHTML 中。

  2. 引用类名的 CSSabc-sort-column显式选择一个TD元素，而在 HTML 中，没有TD具有这样类名的元素。可能的解决方法是将选择器更改为使用TH而不是TD.

  3. 如果假设abc-sort-column应该是abc-sort，则某些 CSS 选择器会明确指定TBODYHTML 中的元素，没有具有此类名称的元素。据推测，选择器应该THEAD代替TBODY.

于 2012-09-03T12:48:45.683 回答