水平和垂直固定標題表html

Question

我有這樣的HTML表，但是有很多項目：

<table class='grid'>
<tr>
    <th>Partner</th>
    <th></th>
    <th>CZ</th>
    <th>CZ</th>
    <th>UK</th>
    <th>PL</th>
    <th>PL</th>
 </tr>
 <tr>
    <th>Foundind date-year</th>
    <th></th>
    <th>2016</th>
    <th>2017</th>
    <th>2017</th>
    <th>2017</th>
    <th>2017</th>
 </tr>
 <tr>
     <th>Founding date -month</th>
     <th></th>
     <th>3</th>
     <th>5</th>
     <th>6</th>
     <th>8</th>
     <th>9</th>
</tr>
<tr>
    <th>Region</th>
    <th>Paid</th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
</tr>
<tr>
    <th>Prague</th>
    <th>NE</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <th>Jihočeský</th>
    <th>NE</th>
    <td>221</td>
    <td>124</td>
    <td></td>
    <td></td>
    <td></td>
</tr>
</table>

我需要在用戶滾動時將標題（水平和垂直）都留在原處。 我發現了僅用於水平修復的解決方案，但是我有二維標頭。 最好的方法是怎么做？

Answer 1

@ charlie12試試這個

  body { font:15px;} table { border-collapse:separate; border-top: 1px solid black; } td { white-space:nowrap; border:qpx solid black; border-top-width:0px; margin:0; } div.second { width: 500px; overflow-x:scroll; margin-left:65px; overflow-y:visible; padding-bottom:1px; height: auto; } div.first { width: auto; overflow-y: scroll; overflow-x: hidden; height: 100px; padding-bottom: 1px; position: absolute; left:0; top:auto; } .headcol { position: absolute; width:5px; left:0; top:auto; border-right: 0px none black; border-top-width:3px; margin-top:-3px; } .headcol:before {content: 'Heading ';} .long { background:orange; letter-spacing:1em; } 

 <div class="first"><div class="second"><table> <tr><td class="headcol">1</td><td class="long">1234567891012345678910</td><td class="long">1234567891012345678910</td></tr> <tr><td class="headcol">2</td><td class="long">1234567891012345678910</td><td class="long">1234567891012345678910</td></tr> <tr><td class="headcol">3</td><td class="long">1234567891012345678910</td><td class="long">1234567891012345678910</td></tr> <tr><td class="headcol">4</td><td class="long">1234567891012345678910</td><td class="long">1234567891012345678910</td></tr> <tr><td class="headcol">5</td><td class="long">1234567891012345678910</td><td class="long">1234567891012345678910</td></tr> <tr><td class="headcol">6</td><td class="long">1234567891012345678910</td><td class="long">1234567891012345678910</td></tr> <tr><td class="headcol">7</td><td class="long">1234567891012345678910</td><td class="long">1234567891012345678910</td></tr> <tr><td class="headcol">8</td><td class="long">1234567891012345678910</td><td class="long">1234567891012345678910</td></tr> <tr><td class="headcol">9</td><td class="long">1234567891012345678910</td><td class="long">1234567891012345678910</td></tr> </table></div></div>