3

I have used bootstrap for a layout in my application. The whole page is divided in 2X2 div,

I want to freeze the top row and 1st column. How can i do so?

Below is the diagram to depict my requirement.

Required form

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Mitali
  • 111
  • 3
  • 11
  • Possible duplicate of [Freeze first row and first column of table](https://stackoverflow.com/questions/45071085/freeze-first-row-and-first-column-of-table) – Sphinx Nov 16 '18 at 00:39

3 Answers3

0

Mitali, Try this,

Use position:fixedfor the top row

This is for Left side box

.leftside {
display: inline-block;
float: left;
position: relative;
width: 250px (your value);
margin-top: 58px (your value);
background-color: #ccc;
height: 100%;
}

Right side box

.rightside {
margin-left: 250px;
min-height: 1000px (your value);
margin-top: 0px;
padding: 0px;
background-color: #eee;
overflow: auto;
position: relative;
}
Akhil Namboothiri
  • 184
  • 2
  • 13
0

try this with bootstrap-

#sidebar.affix-top{
position: static;
margin-top:30px;
width:228px;
}
#sidebar.affix{
position: fixed;
top:70px;
width:228px;
}
Rajat_RJT
  • 64
  • 7
0

There are several examples out there already.

https://codepen.io/aifarfa/pen/jbMqba

https://jsfiddle.net/RMarsh/bzuasLcz/3/

https://www.jqueryscript.net/demo/jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll/

Looks like I have to enter in code to show these links, this is for angular and jquery using html tables.
Mastro
  • 1,477
  • 2
  • 22
  • 52