小提琴: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
}
答案 0 :(得分:0)
试试这个
.paginated tbody tr td:nth-child(2) {
text-align: center;
width:30px;
}
答案 1 :(得分: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,第1个col变为30px宽。