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