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试试这个

＆＃13;

        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; }

＆＃13;

<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>

＆＃13;

水平和垂直固定标头表html

1 个答案: