嵌套表：冻结第一列

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

位置每Tr首款TD通过使用CSS “第一子” 和定位表 “相对”

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>