0

小提琴：http: //jsfiddle.net/fr8Kw/

html:

<!DOCTYPE html>
<html>
<head>
    <title>Table Pagination</title>
    <style>

        body {
            font-family: Tahoma;
        }

        h3 {
        background-color: rgb(232, 232, 232);
        font-size: 14px;
        font-weight: bold;
        color: gray;
        width: 786px;
        height:25px;
        margin:2em auto;
        padding-top:10px;
        padding-left:8px;
        margin-bottom: -23px;
        border: 1px solid;
        border-color: #888888;
    }

        table {
            table-layout: fixed;
            font-size: 12px;
            width: 810px;
            margin: 2em auto ;
        }

        thead {
            background:rgb(232, 232, 232);
            color:  gray;
            height:20px;
        }

        td {
            width: 10em;
            height:20px;
            word-wrap: break-word;
        }

        #localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(1 /*this is the column number*/){
           text-align: center;
           width:30px
        }

        #localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(2 /*this is the column number*/) { 
            width:250px
        }

        #localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(3 /*this is the column number*/) { 
            width:250px
        }

        #localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(4 /*this is the column number*/){ 
            width:60px
        }

        #localFileCopyingDiv #supplementaryMaterialsDiv, #assetsDiv,  table tr td:nth-child(5 /*this is the column number*/) { 
            width:220px
        }

        tbody {
            background:#D8D8D8  
        }

        div.pager {
            width: 799px;
            text-align: left;
            margin: 0 auto;
            margin-top: -20px;
        }

        div.pager span {
            display: inline-block;
            width: 10px;
            height: 10px;
            cursor: pointer;
            background:rgb(156, 187, 203);
            color: #fff;
            margin-right: 0.5em;
            font-size: 13px;
            padding-top: 8px;
            padding-left:8px;
            padding-bottom: 8px;
            padding-right:8px;
        }

        div.pager span.active {
            background: rgb(123, 167, 198);
        }

        .highlightedRow { 
        color : red; 
        }

        #fileWritingDiv table tbody {
            color : red;
        }

    </style>
    <script type="text/javascript" src="resources/javascripts/jquery-1.9.1.min.js"></script>


</head>
<body>

<div id="localFileCopyingDiv">

    <h3>Local File Copying Info:</h3>

    <table class="paginated">
        <thead>
            <tr>
                <td>No.</td>
                <td>Local File Locataion</td>
                <td>Server File Locataion</td>
                <td>Status</td>
                <td>Error Cause</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>Error</td>
                <td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
            </tr>
            <tr>
                <td>1</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>Error</td>
                <td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
            </tr>
            <tr>
                <td>1</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>Error</td>
                <td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
            </tr>

        </tbody>
    </table>

</div>


<div id="supplementaryMaterialsDiv">

    <h3>Supplementary Materials:</h3>

    <table class="paginated">
        <thead>
             <tr>
                <td>No.</td>
                <td>Local File Locataion</td>
                <td>Server File Locataion</td>
                <td>Status</td>
                <td>Error Cause</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>Error</td>
                <td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
            </tr>
            <tr>
                <td>1</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>Error</td>
                <td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
            </tr>
            <tr>
                <td>1</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>Error</td>
                <td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
            </tr>

        </tbody>
    </table>

</div>


<div id="assetsDiv">

    <h3>Assets:</h3>

    <table class="paginated">
                <thead>
        <tr>
             <tr>
                <td>No.</td>
                <td>Local File Locataion</td>
                <td>Server File Locataion</td>
                <td>Status</td>
                <td>Error Cause</td>
            </tr>
        </tr>
    </thead>
    <tbody>
        <tr>
                <td>1</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>Error</td>
                <td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
            </tr>
        <tr>
                <td>1</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>Error</td>
                <td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
            </tr>

        <tr>
                <td>1</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
                <td>Error</td>
                <td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
            </tr>
    </tbody>
</table>

    </div>

<div id="fileWritingDiv">

        <h3>File Writing Status</h3>

        <table>
            <thead>
                <tr>
                    <td>File Name</td>
                    <td>Error Cause</td>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>

            </tbody>

        </table>

    </div>

<script type="text/javascript"
                src="resources/javascripts/tablePagination.js" /></script>

        </body>
</html>

问题：以下 CSS 规则未应用于任何列。为什么不？

#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(1 /*this is the column number*/)
{
    text-align: center;
    width:30px
}
4

2 回答 2

0

试试这样

 .paginated tbody tr td:nth-child(2) {
text-align: center;
width:30px;
 }
于 2013-06-11T13:46:33.963 回答
0

请注意，在您的资产表中，您在 TR 中有一个 TR ..

 <table class="paginated">
                <thead>
        <tr> <----
             <tr>
                <td>No.</td>
                <td>Local File Locataion</td>
                <td>Server File Locataion</td>
                <td>Status</td>
                <td>Error Cause</td>
            </tr>
        </tr> <----
    </thead>
    <tbody>

删除杂散 TR 和 1st col 变为 30px 宽。

于 2013-06-11T13:51:45.433 回答