这是一个带有页眉和页脚的简单小表格,所有 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>