1
我爲我的工作構建了一個調度系統，它被設置爲兩列頁面 - 導航欄的一列和數據的下一列。我正在使用一些jQuery來自動根據用戶屏幕的大小格式化列寬。由於某些原因，我的標題表中的列的大小與我的數據表不同。這可能是令人困惑的，但看看代碼，它應該更有意義。使用jQuery對齊項目
這裏是頁面的HTML部分：
<html>
<head>
<link rel="stylesheet" href="40press.css" type="text/css" />
<script type="text/javascript" src="../scripts/jquery.js" />
<script type="text/javascript">
var width = document.documentElement.clientWidth;
width = width - 200;
widthval = width + "px";
$(document).ready(function() {
$("#title").css('width', widthval);
$("#list").css('width', widthval);
widthval = (width * .08) + "px";
$("td#jobnumber").css('width', widthval);
widthval = (width * .15) + "px";
$("td#customer").css('width', widthval);
widthval = (width * .15) + "px";
$("td#CSR").css('width', widthval);
widthval = (width * .25) + "px";
$("td#desc").css('width', widthval);
widthval = (width * .08) + "px";
$("td#date").css('width', widthval);
widthval = (width * .08) + "px";
$("td#coating").css('width', widthval);
widthval = (width * .02) + "px";
$("td#plates").css('width', widthval);
widthval = (width * .02) + "px";
$("td#forms").css('width', widthval);
widthval = (width * .05) + "px";
$("td#impress").css('width', widthval);
widthval = (width * .05) + "px";
$("td#count").css('width', widthval);
widthval = (width * .02) + "px";
$("td#pages").css('width', widthval);
$(".listitem").mouseenter(function() {
$(this).css('background-color', '#A9B5FF');
});
$(".listitem").mouseleave(function() {
$(this).css('background-color', 'white');
});
});
</script>
</head>
<title>40" Press Schedule</title>
<body>
<table cellpadding="0" cellspacing="0" id="large">
<tr id="header"><td><div id="lcorner"></div>
<div id="title">
<center><h1>40" Press Schedule</h1></center>
<table id="fields">
<tr><td class="left" id="jobnumber">Job #</td>
<td class="left" id="customer">Customer</td>
<td class="left" id="CSR">CSR</td>
<td class="left" id="desc">Description</td>
<td class="left" id="date">Due Date</td>
<td class="left" id="coating">Coating</td>
<td class="left" id="plates">Plates</td>
<td class="left" id="forms">Forms</td>
<td class="left" id="impress">Impress</td>
<td class="left" id="count">Count</td>
<td class="left" id="pages">Pages</td></tr>
</table>
</div>
</td></tr>
<tr id="body"><td>
<div id="sidebar">
<div class="selectedlistitem" id="joblog">Job Log</div>
<div class="listitem" id="smallpresses">Small Presses</div>
<div class="listitem" id="40presses">40" Presses</div>
<div class="listitem" id="postpress">Post Press</div>
<div class="listitem" id="ossmailing">OSS Mailing Ready to Ship</div>
<div class="listitem" id="shipped">Shipped</div>
<div class="listitem" id="dib">DIB</div>
<div class="listitem" id="paper">Paper</div>
<div class="listitem" id="dataentry">Data Entry</div>
<div class="listitem" id="hotsheet">Hot Sheet</div>
<div class="listitem" id="schedule2">Schedule2</div>
</div>
<div id="list">
<div id="speedmaster" class="machine">SpeedMaster 102(640)</div>
<div id="entry">
<table id="line">
<tr><td class="left" id="jobnumber">24578</td>
<td class="left" id="customer">MIFAB</td>
<td class="left" id="CSR">Test User</td>
<td class="left" id="desc">MIFab boxes fri paper need drawdownsd</td>
<td class="left" id="date">10/26</td>
<td class="left" id="coating">SPT Gls Aq</td>
<td class="left" id="plates">2</td>
<td class="left" id="forms">1</td>
<td class="left" id="impress">500</td>
<td class="left" id="count">18,000</td>
<td class="left" id="pages">1</td></tr>
</table>
</div>
</div>
</td></tr>
</table>
</body>
</html>
而CSS：
body {
margin: 0px;
padding: 0px;
}
#header {
height: 150px;
}
#lcorner {
height: 150px;
width: 150px;
background-color: #0a1e93;
float: left;
border-bottom: 1px solid #A9B5FF;
}
#title {
position: relative;
height: 149px;
float: left;
border-bottom: 1px solid #A9B5FF;
}
td {
border: 1px solid red;
}
td.left {
text-align: left;
}
td.center {
text-align: center;
}
#fields {
position: absolute;
bottom: 0;
}
#sidebar {
float: left;
width: 149px;
border-right: 1px solid #0A1E93;
margin: 0px;
padding: 0px;
}
.listitem {
text-align: center;
height: 24px;
border-bottom: 1px solid #AEAEAE;
color: #0A1E93;
position: relative;
padding-top: 10%;
padding-bottom: 10%;
}
.selectedlistitem {
text-align: center;
height: 24px;
color: white;
position: relative;
padding-top: 10%;
padding-bottom: 10%;
background-color: #0A1E93;
}
#list {
position: relative;
float: left;
}
如何讓他們正確對齊任何想法？
更新：
我能解決它。我需要刪除所有邊距和填充到id =「line」表。由於某些原因，它不能從父容器中應用。
順便說一句，我都td元素紅色邊框，使其更容易看到的問題是什麼。另外，我只測試了Chrome中的代碼......因此它在IE，Safari或FF中可能會有完全不同的問題。 – jwegner 2010-10-27 19:05:51