0

css を使用してマークアップを生成した html テーブルの作業バージョンは次のとおりです: http://jsfiddle.net/nexU/JkUCQ/1/

ご覧のとおり、これらの 3 つの特定の TD タグに対してこれらの配置スタイルと幅スタイルを外部 css に設定し、asp コントロールによって自動的に生成されるものをオーバーライドするだけです。

よろしくお願いします。

/* 1 番目の pagerRow TD の幅を 10% にしたい 2 番目の pagerRow TD の幅を 80% にしたい 3 番目の pagerRow TD の幅を 10% にしたい

*/

/------------style.css------------/

.pagerRow
{
    background: #3D6AA2;
    font-weight: normal;
    color: #fff;
    text-align: left;
    height: 30px;
}

.pagerRow td
{
    border: solid 1px red;
}

/ ------------ コントロールによって生成された html の一部 ------------ /

<table id="mainContacts" class="contactsBase" cellspacing="0" border="1" style="width: 100%;">
    <tbody>
        <tr class="header_row">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="pagerRow" align="center">
            <td colspan="5">
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tbody>
                        <tr>
                            <td align="left" width="25%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
                            </td>
                            <td align="center" width="50%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
                                <p> 1,2,3,4,5 </p>
                            </td>
                            <td align="right" width="25%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
4

1 に答える 1

3

作業フィドル: http://jsfiddle.net/JkUCQ/4/
(新しい入力に基づいて更新)

これを CSS に追加します。

.pagerRow tr td:nth-child(1) {
    width:10% !important;
}
.pagerRow tr td:nth-child(2) {
    width:80% !important;
}
.pagerRow tr td:nth-child(3) {
    width:10% !important;
}
于 2013-04-26T19:06:27.513 に答える