我正在为我的工作构建一个调度系统,它被设置为一个两列页面—一列用于导航栏,下一列用于数据。我使用一些jQuery让它根据用户屏幕的大小自动格式化列宽。由于某些原因,我的头表中的列的大小与我的数据表不同。这可能令人困惑,但是看看代码,它应该更有意义。
<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>
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;
}
有什么办法让他们正确对齐吗?
