嵌套表：冻结第一列

Question

有人可以帮我修一下上面代码的第一列。

提前致谢。

body { font:16px Calibri;}
table { border-collapse:separate; border-top: 3px solid grey; }
td {
    margin:0;
    border:3px solid grey; 
    border-top-width:0px; 
    white-space:nowrap;
}
div { 
    width: 600px; 
    overflow-x:scroll;  
    margin-left:5em; 
    overflow-y:visible;
    padding-bottom:1px;
}
.headcol:before {content: 'Row ';}
.long { background:yellow; letter-spacing:1em; }

<div><table>    
    
    <tr><td>1</td></tr>
    <tr>
        <td>1.1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
     <tr><td>2</td></tr>
    <tr>
        <td>2.1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
       <tr><td>3</td></tr>
    <tr>
        <td>3.1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
   
</table></div>

Answer 1

使用css“first-child”将第一个td放在每个tr中，并将表定位到“relative”

body { font:16px Calibri;}
table { border-collapse:separate; border-top: 3px solid grey; position: relative; }
tr td:first-child { position: fixed; width: 3.2em; left: 2em; }
td {
    margin:0;
    border:3px solid grey; 
    border-top-width:0px; 
    white-space:nowrap;
}
div { 
    width: 600px; 
    overflow-x:scroll;  
    margin-left:5em; 
    overflow-y:visible;
    padding-bottom:1px;
}
.headcol:before {content: 'Row ';}
.long { background:yellow; letter-spacing:1em; }

<div><table>    
    
    <tr><td>1</td></tr>
    <tr>
        <td>1.1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
     <tr><td>2</td></tr>
    <tr>
        <td>2.1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
       <tr><td>3</td></tr>
    <tr>
        <td>3.1</td>
        <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
   
</table></div>