CSS Only Fixed Table Headers

Developer
TJ VanToll
Size
2,708 Kb
Views
87,032
  1. CSS Only Fixed Table Headers Previews
  2. CSS Only Fixed Table Headers HTML Codes
  3. CSS Only Fixed Table Headers CSS Codes

How do I make an css only fixed table headers?

A quick example showing how fixed table headers can be created with a single semantic table and no JavaScript.. What is a css only fixed table headers? How do you make a css only fixed table headers? This script and codes were developed by TJ VanToll on 12 July 2022, Tuesday.

CSS Only Fixed Table Headers Previews
IQ Test

CSS Only Fixed Table Headers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Only Fixed Table Headers</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<table class="fixed_headers"> <thead> <tr> <th>Name</th> <th>Color</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Pear</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Grape</td> <td>Purple / Green</td> <td>These are purple and green.</td> </tr> <tr> <td>Orange</td> <td>Orange</td> <td>These are orange.</td> </tr> <tr> <td>Banana</td> <td>Yellow</td> <td>These are yellow.</td> </tr> <tr> <td>Kiwi</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Plum</td> <td>Purple</td> <td>These are Purple</td> </tr> <tr> <td>Watermelon</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Tomato</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Cherry</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Cantelope</td> <td>Orange</td> <td>These are orange inside.</td> </tr> <tr> <td>Honeydew</td> <td>Green</td> <td>These are green inside.</td> </tr> <tr> <td>Papaya</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Raspberry</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Blueberry</td> <td>Blue</td> <td>These are blue.</td> </tr> <tr> <td>Mango</td> <td>Orange</td> <td>These are orange.</td> </tr> <tr> <td>Passion Fruit</td> <td>Green</td> <td>These are green.</td> </tr> </tbody>
</table>
<!--[if lte IE 9]>
</div>
<!--<![endif]-->
</body>
</html>

CSS Only Fixed Table Headers - Script Codes CSS Codes

.fixed_headers { width: 750px; table-layout: fixed; border-collapse: collapse;
}
.fixed_headers th { text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td { padding: 5px; text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) { min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) { min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) { width: 350px;
}
.fixed_headers thead { background-color: #333; color: #FDFDFD;
}
.fixed_headers thead tr { display: block; position: relative;
}
.fixed_headers tbody { display: block; overflow: auto; width: 100%; height: 300px;
}
.fixed_headers tbody tr:nth-child(even) { background-color: #DDD;
}
.old_ie_wrapper { height: 300px; width: 750px; overflow-x: hidden; overflow-y: auto;
}
.old_ie_wrapper tbody { height: auto;
}
CSS Only Fixed Table Headers - Script Codes
CSS Only Fixed Table Headers - Script Codes
Home Page Home
Developer TJ VanToll
Username tjvantoll
Uploaded July 12, 2022
Rating 4.5
Size 2,708 Kb
Views 87,032
Do you need developer help for CSS Only Fixed Table Headers?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

TJ VanToll (tjvantoll) Script Codes
Name
HTML5 Form Validation - Show All Error Messages on Submit
HTML Form Validation - Default Behavior
Price Options
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!