Position: sticky is not working in IE for table header

HTML & CSS
1

I am making a table using bootstrap 3.3.7, in this I am using Fixed header for that I am giving Position:static, but it is not working in IE, please suggest any alternate way.

here is my working…

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Simple Sidebar - Start Bootstrap Template</title>

	<link href="css/bootstrap.min.css" rel="stylesheet">	
    <link href="css/simple-sidebar.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	
	<STYLE>
		.tableStyle{overflow-y: auto; height: 400px; border:1px solid #ccc;} 
		.tableStyle thead th {position: sticky; top: 0;}
		.tableStyle thead th{background:#f1f1f1; color:#333;}
		
	</STYLE>
</head>

<body>
<div class="container">
  <h2>Table</h2>
  <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>                                                                                      
	  <div class="table-responsive tableStyle">          
		  <table class="table">
			<thead>
			  <tr>
				<th>#</th>
				<th>Firstname</th>
				<th>Lastname</th>
				<th>Age</th>
				<th>City</th>
				<th>Country</th>
			  </tr>
			</thead>
			<tbody>
			  <tr>
				<td>1</td>
				<td>Anna</td>
				<td>Pitt</td>
				<td>35</td>
				<td>New York</td>
				<td>USA</td>
			  </tr>
			  <tr>
				<td>2</td>
				<td>Anna</td>
				<td>Pitt</td>
				<td>35</td>
				<td>New York</td>
				<td>USA</td>
			  </tr>
			  <tr>
				<td>3</td>
				<td>Anna</td>
				<td>Pitt</td>
				<td>35</td>
				<td>New York</td>
				<td>USA</td>
			  </tr>
			  
			</tbody>
		  </table>
	  </div>
</div>
    <!-- /#wrapper -->
    <!-- jQuery -->
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>	
		<script src="js/sidebar_menu.js"></script>

</body>

</html>
2

Position:sticky is not supported in IE11 or under so will be ignored. Edge and other modern browsers will support it although you still need the WebKit prefix for iOS.

3

is there any other alternate way to fix table header which work cross browser i.e. IE, firefox, chrome…

4

Only if you script it but that seems a big price to pay for a marginal browser like IE.

If your table cells are fixed width (using table-layout:fixed algorithm) you can do it like this in IE but for fluid tables the only real answer for IE is to script it.

5

Personally, I would look for a “graceful degradation” solution. i.e. “not as good, but not broken and still OK”

Is it really all that bad if IE doesn’t support the sticky? True, you know what they’re missing but unless they visit using different browsers they won’t.

1 Like
6

Yes the position:sticky is ideal for that because IE just gets a normal table and is none the wiser. Good browsers get the sticky version.:slight_smile:

3 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.