Замороженный первая таблица HTML-столбец с CSS или Angularjs

Question

У меня есть таблица, где я хотел бы иметь первый столбец и, если возможно, первый ряд заморожена

Так я могу иметь очень большой набор данных и посмотреть, откуда данные принадлежат

Я стараюсь использовать style = "position: fixed", также абсолютный, ни один из них не работает.

Так что dsr1, dsr2, dtr1 и т. Д. Могут прокручиваться, а fr1, frw2, fc1, fc2 останутся фиксированными.

------------------------- 
fr1 | frw2 |frw3 |frw4 | 
--------------------- 
fc1 | dsr1 |dsr2 |dsr3 | 
--------------------- 
fc2 | dtr1 |dtr2 |dtr3 | 

Try, но не получилось:

------------------------- 
fr1 style="position:fixed "| frw2 |frw3 |frw4 | 
--------------------- 
fc1 | dsr1 |dsr2 |dsr3 | 
--------------------- 
fc2 | dtr1 |dtr2 |dtr3 | 

Answer 1

Вы можете попробовать это,

div { 
 
    width: 300px; 
 
    overflow-x: scroll; 
 
    margin-left: 50px; 
 
    overflow-y: visible; 
 
    padding-bottom: 1px; 
 
} 
 
td { 
 
    padding: 0 40px; 
 
}

<div> 
 
    <table> 
 
    <tr> 
 
     <td style="position:absolute;width:50px; left:0;">fr1</td> 
 
     <td>frw2</td> 
 
     <td>frw3</td> 
 
     <td>frw4</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="position:absolute;width:50px;left:0; ">fc1</td> 
 
     <td>dsr1</td> 
 
     <td>dsr2</td> 
 
     <td>dsr3</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="position:absolute;width:50px;left:0; ">fc2</td> 
 
     <td>dtr1</td> 
 
     <td>dtr2</td> 
 
     <td>dtr3</td> 
 
    </tr> 
 
    </table> 
 
</div>

Demo