0

Can someone please help me to fix the first column of the table for the above code.

Thanks in advance.

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>
zessx
  • 68,042
  • 28
  • 135
  • 158
user598082
  • 25
  • 9

1 Answers1

0

Position the first td in every tr by using css "first-child" and position the table to "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>
Swati
  • 99
  • 4