样式不适用于div下的表格(style is not applying on table under divs)

小提琴： 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 }

Fiddle: 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>

Problem: the following CSS rule is not being applied to any column. Why not?

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

最满意答案

在您的资产表中注意您在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，第一个col变为30px宽。

notice in your Assets table you have a TR within a 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>

remove the stray TR and the 1st col becomes 30px wide.

更多推荐