Fatal编程技术网
  • jquery/
  • 将项与jQuery对齐

将项与jQuery对齐

jquery css

将项与jQuery对齐,jquery,css,html-table,format,alignment,Jquery,Css,Html Table,Format,Alignment,我正在为我的工作构建一个调度系统，它被设置为两列页面——一列用于导航栏，下一列用于数据。我正在使用一些jQuery，让它根据用户屏幕的大小自动格式化列宽。由于某些原因，标题表中的列大小与数据表中的列大小不同。这可能会让人困惑，但看看代码，它应该更有意义 以下是页面的html部分： <html> <head> <link rel="stylesheet" href="40press.css" type="text/css" /> <script type=

我正在为我的工作构建一个调度系统，它被设置为两列页面——一列用于导航栏，下一列用于数据。我正在使用一些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>
关于如何让它们正确对齐有什么想法吗

更新：
我能修好它。我需要删除id=“line”表的所有边距和填充。由于某些原因，它没有从父容器应用。

也许您应该使用标记：

<th>
为您的标题

顺便说一句，我用红色标出了所有td元素，以便更容易看出问题所在。另外，我只在Chrome中测试了代码。。。因此，它可能在IE、Safari或FF中存在完全不同的问题。 
<th>