css - div の下のテーブルにスタイルが適用されない

Question

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
}

score 0 · Accepted Answer

Assets テーブルに、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を削除すると、1列目が30px幅になります。

css - div の下のテーブルにスタイルが適用されない

2 に答える 2

Related

Reference