Question

我对我长时间创作的桌子有疑问。

我有一张桌子，可排序的列有蓝色背景。我想在这个表中添加另一个类，比如说“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;
}

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

请帮我解决这个问题。

提前致谢

Answer 1

是因为你使用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类

Answer 2

这是由几件事引起的。

CSS引用名为abc-sort-column的类，但HTML中没有任何具有该类的元素。相反，HTML只包含名为abc-sort的元素。可能的解决方法是将CSS 中的abc-sort-column更改为abc-sort或将HTML中的 abc-sort更改为abc-sort-column。
引用类名abc-sort-column的CSS显式选择TD元素，而在HTML中，没有TD元素具有此类名称。可推测的修复方法是将选择器更改为使用TH而不是TD。
如果假设abc-sort-column应该是abc-sort，则某些CSS选择器显式指定TBODY元素，在HTML中，没有具有此类名的元素。据推测，选择器应为THEAD而不是TBODY。

无法更改表格的可排序列背景颜色

2 个答案: