0

这是一个带有页眉和页脚的简单小表格，所有 css 和 html 顶部的页眉在滚动时保持固定；

我的标题列与表格列不对齐。有谁看到我做错了什么？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0 0 1em ;
}
table p {
    margin:0;
}
.wrap {
    margin: 0 0 0 0;
    float:left;
    position:relative;
    overflow:hidden;
    padding:0 0 0;
    border:7px solid #CCCCCC;
  /*   width:1800px;            */
}
.inner2 {
    float:left;
  /*  width:1800px;     */
    height:570px;
    position:relative;
    padding:60px 0 17px;
    overflow-y:hidden;
    overflow-x:auto;
}
.inner {
  /*   width:1800px;        */
    float:left;
    height:570px;
    overflow-y:auto;
    overflow-x:hidden;
}
.ylw {
    background-color:yellow;
}
.rd {
    background-color:red;
}
.grn {
    background-color:#339966;
}
table {
  /*   width:1800px;        */
    margin:0 0 0 0;
    border-collapse:collapse;
    float:left;
}
td {
    padding:0 0 0 0;
    border:1px solid #000000;
    text-align:center;
    font-size:14px;
}
tfoot th, thead th {
    font-weight:bold;
    text-align:center;
    border:1px solid #000000;
    padding:0 0 0 0;
    font-size:14px;
}
thead th {
    border:1px solid #000000;
    text-align:center;
    padding:0 0 0 0;
    }
thead tr p {
    margin: 0 0 0 -7px; 
    font-size:14px;
    position:absolute;
    text-align:center;
    padding:0 0 0 0;
    top:0;
}
.last {
    padding-right:15px!important;
}
</style>
</head>
<body>
<h1>Table with fixed header</h1>
<p>Notes: The header is part of the same table and not a separate table on top. The width of the table cells or header cells is not defined and will match whatever content is in the cells. The table can be a fluid length and will resize within reasonable limits accordingly.</p>
<p>You will be limited by the position of the header rows elements though as they can't really me moved around anymore thatn they are now.</p>
<div class='wrap'>
    <div class='inner2'>
        <div class='inner'>
            <table id='data' cellspacing='0' cellpadding='0'>
                <thead>
                    <tr>
                        <th><p>Jan</p></th>
                        <th><p>Feb</p></th>
                        <th><p>Mar</p></th>
                        <th><p>Apr</p></th>
                        <th><p>May</p></th>
                        <th><p>Jun</p></th>
                        <th><p>Jul</p></th>
                        <th><p>Aug</p></th>
                        <th><p>September</p></th>
                        <th><p>Oct</p></th>
                        <th><p>Nov</p></th>
                        <th class='last'><p>Dec</p></th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th><p>Jan</p></th>
                        <th><p>Feb</p></th>
                        <th><p>Mar</p></th>
                        <th><p>Apr</p></th>
                        <th><p>May</p></th>
                        <th><p>Jun</p></th>
                        <th><p>Jul</p></th>
                        <th><p>Aug</p></th>
                        <th><p>September</p></th>
                        <th><p>Oct</p></th>
                        <th><p>Nov</p></th>
                        <th class='last'><p>Dec</p></th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>5</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='last'>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3 more data</td>
                        <td>5</td>
                        <td class='last'>7</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>23</td>
                        <td>4</td>
                        <td>1</td>
                        <td>6</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>6</td>
                        <td>1</td>
                        <td>4</td>
                        <td>7</td>
                        <td>1</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>3 with more data</td>
                        <td>2</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>8</td>
                        <td>1</td>
                        <td>1</td>
                        <td>2</td>
                        <td>8</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>2</td>
                        <td>9</td>
                        <td>4</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='last'>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td>4</td>
                        <td>5</td>
                        <td>5</td>
                        <td>2</td>
                        <td>0</td>
                        <td>3</td>
                        <td>23</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>4</td>
                        <td>2</td>
                        <td>67</td>
                        <td>2</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>4</td>
                        <td>4</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>2</td>
                        <td>2</td>
                        <td>5</td>
                        <td>65</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>4</td>
                        <td>1</td>
                        <td>2</td>
                        <td>13</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>5</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='last'>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3 more data</td>
                        <td>5</td>
                        <td class='last'>7</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>23</td>
                        <td>4</td>
                        <td>1</td>
                        <td>6</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>6</td>
                        <td>1</td>
                        <td>4</td>
                        <td>7</td>
                        <td>1</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>3 with more data</td>
                        <td>2</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>8</td>
                        <td>1</td>
                        <td>1</td>
                        <td>2</td>
                        <td>8</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>2</td>
                        <td>9</td>
                        <td>4</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='last'>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td>4</td>
                        <td>5</td>
                        <td>5</td>
                        <td>2</td>
                        <td>0</td>
                        <td>3</td>
                        <td>23</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>4</td>
                        <td>2</td>
                        <td>67</td>
                        <td>2</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>4</td>
                        <td>4</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>2</td>
                        <td>2</td>
                        <td>5</td>
                        <td>65</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>4</td>
                        <td>1</td>
                        <td>2</td>
                        <td>13</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>5</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='last'>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3 more data</td>
                        <td>5</td>
                        <td class='last'>7</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>23</td>
                        <td>4</td>
                        <td>1</td>
                        <td>6</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>6</td>
                        <td>1</td>
                        <td>4</td>
                        <td>7</td>
                        <td>1</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>3 with more data</td>
                        <td>2</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>8</td>
                        <td>1</td>
                        <td>1</td>
                        <td>2</td>
                        <td>8</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>2</td>
                        <td>9</td>
                        <td>4</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='last'>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td>4</td>
                        <td>5</td>
                        <td>5</td>
                        <td>2</td>
                        <td>0</td>
                        <td>3</td>
                        <td>23</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>4</td>
                        <td>2</td>
                        <td>67</td>
                        <td>2</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>4</td>
                        <td>4</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>2</td>
                        <td>2</td>
                        <td>5</td>
                        <td>65</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>4</td>
                        <td>1</td>
                        <td>2</td>
                        <td>13</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>5</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='last'>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3 more data</td>
                        <td>5</td>
                        <td class='last'>7</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>23</td>
                        <td>4</td>
                        <td>1</td>
                        <td>6</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>6</td>
                        <td>1</td>
                        <td>4</td>
                        <td>7</td>
                        <td>1</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>3 with more data</td>
                        <td>2</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>8</td>
                        <td>1</td>
                        <td>1</td>
                        <td>2</td>
                        <td>8</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>2</td>
                        <td>9</td>
                        <td>4</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='last'>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td>4</td>
                        <td>5</td>
                        <td>5</td>
                        <td>2</td>
                        <td>0</td>
                        <td>3</td>
                        <td>23</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>4</td>
                        <td>2</td>
                        <td>67</td>
                        <td>2</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>4</td>
                        <td>4</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>2</td>
                        <td>2</td>
                        <td>5</td>
                        <td>65</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>4</td>
                        <td>1</td>
                        <td>2</td>
                        <td>13</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td class='last'>4</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>5</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='last'>3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3 more data</td>
                        <td>5</td>
                        <td class='last'>7</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>23</td>
                        <td>4</td>
                        <td>1</td>
                        <td>6</td>
                        <td class='last'>6</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>6</td>
                        <td>1</td>
                        <td>4</td>
                        <td>7</td>
                        <td>1</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td class='last'>6</td>
                    </tr>
               <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3 more data</td>
                        <td>5</td>
                        <td class='last'>7</td>
                    </tr>
                 </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
4

1 回答 1

0

您绝对定位并且在 TH 标签内的 P 标签上有负边距

这条规则：thead tr p尝试将这条规则的边距归零。

thead tr p {
     margin: 0; /* zero out margin */

     font-size: 14px;
     position: absolute;
     text-align: center;
     padding: 0;
     top: 0;
}

如果您希望text-align:center在绝对定位 P 标签时起作用..您需要为它们添加特定的宽度

编辑：

你也有你的 TFOOT 在你的 THEAD 之下，而不是在 TBODY 之后

http://jsfiddle.net/MP8Bc/

它排成一行，但它们向左对齐......除非您添加宽度，否则它们不会对齐中心，因为它们是绝对定位的，这意味着它们不在文档流中

于 2013-10-11T18:10:39.667 回答