横向和纵向固定表头html答案

【问题标题】：Horizontal and vertical fixed header table html横向和纵向固定表头html
【发布时间】：2017-09-05 13:06:06
【问题描述】：

我有这样的 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>

当用户滚动时，我需要标题（水平和垂直）保持在原位。我找到了仅用于水平修复的解决方案，但我有二维标题。最好的方法是什么？

【问题讨论】：

这段代码很完整，一团糟
请发布更好的代码并清理它以修复一些错误（意外的引用、未关闭的标签等）
我已经编辑了这个问题，看起来更干净
感谢@Maxwells.c 的编辑和混乱的代码抱歉。我从 javascript 生成它。

标签： html css fixed

【解决方案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>

【讨论】：