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。可能な修正は、CSSまたはHTMLのに変更abc-sort-columnすることです。abc-sort abc-sortabc-sort-column

  2. クラス名を参照する CSSは要素をabc-sort-column明示的に選択しますTDが、HTML にはTDそのようなクラス名を持つ要素はありません。推定される修正は、セレクターをTHの代わりに使用するように変更することですTD。

  3. が であると仮定abc-sort-columnするとabc-sort、一部の CSS セレクターは要素を明示的に指定しますTBODYが、HTML にはそのようなクラス名を持つ要素はありません。おそらく、セレクターはのTHEAD代わりにする必要がありTBODYます。

于 2012-09-03T12:48:45.683 に答える