Position Sticky Doesn't Work On Mozilla Neither In Safari

Position sticky doesn't work on mozilla neither in safari browser, but in chrome it's working perfectly. Is anyone there who can help me.. I know it we can make it don't by many ot

Solution 1:

Position: sticky is not a standard, so it may works, depending of the browser and the version, or even you need to set some flags in web browser config.

You can check this availavility here:

http://caniuse.com/#feat=css-sticky

As you can see, in known issues:

Chrome, Firefox and Safari 7 & below do not appear to support sticky table headers. (see also Firefox bug)

Solution 2:

Since its only table elements which aren't responding properly to position: sticky and since it's only the th elements you want to apply to the sticky positioning to, why not build a custom thead and apply position: sticky to that custom thead?

Working Example:

.custom-thead {
position: -webkit-sticky;
position: sticky;
top: -1px;
min-width: 816px;
}

.custom-thead.custom-th {
display: inline-block;
position: relative;
left: 2px;
min-width: 202px;
margin-right: 2px;
background-color: #ccc;
}

.table-div {
max-height: 200px;
overflow: auto;
}

.table-divtabletd {
min-width: 200px;
height: 50px;
background-color: #eee;
}

.custom-th {
font-weight: bold;
}

.custom-th, td {
text-align: center;
}

<divclass="container"><divclass="row nopadding"><divclass="table-div table-responsive"><divclass="custom-thead"><divclass="custom-th">head1</div><divclass="custom-th">head1</div><divclass="custom-th">head1</div><divclass="custom-th">head1</div></div><tableclass="table table-bordered"><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td>15</td><td>16</td></tr></tbody></table></div></div></div>