css fixed first 3 row and first column

Question

I have a table here. I want to fixed the first 3 rows (from 'learners name' to 'highest possible score') when I scroll down. and also to fixed the first column (leaders name,highest possible score, including the (male,numbers,and name)) when I scroll right.

I tried to add this to the css

table tbody, table thead{
   display: block;
}

table tbody{
   overflow: auto;
   height: 100px;
}

table {
    width: 350px; /* can be dynamic */
}

th {
    width: 75px;
}

it fixed the column but the table crashed.

Possible duplicate of [Table tbody scroll in IE8](http://stackoverflow.com/questions/16984323/table-tbody-scroll-in-ie8) — Mr_Green, Oct 18 '16 at 05:54
If `js` is allowed, use scroll event and add fixed class to those elements which you want to be fixed — Abhishek Pandey, Oct 18 '16 at 06:57

score 0 · Answer 1 · edited Oct 18 '16 at 07:12

0

div.fixed {
    position: fixed;
    top:1px
    right: 0;
    width: 100%;
    border: 3px solid #73AD21;
}
.loose{

padding-top:130px;
}

<html>
<head>
</head>
<body>
<div class="fixed">
your  fixed table here
</div>

<div class="loose">

your moving table here, inside loose div 

</div>




</body>
</html>

edited Oct 18 '16 at 07:12

Santosh Khalse

12,002
3
36
36

answered Oct 18 '16 at 06:06

Khubaib Ghouri

15
4

css fixed first 3 row and first column

1 Answers1