Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Table with sticky header and resizable columns without using JQuery

Tags:

javascript

html

css

All the solutions I've seen to make a table with a sticky header and resizable columns seems to be using Jquery. I want a plain old solution using CSS only if possible. If CSS only is not possible then I can go with CSS + Javascript but no JQuery, please. Internet Explorer support is a pipe dream at this point...

I've found separate solutions for a sticky header, and separate solutions for resizable columns but no complete solution for both. Can anyone help? The only thing missing in my attempt table tbody is display:block for the scrollbar to work, but that messes everything else up. My attempt:

        table{ 
        	display:block;
        	background-color:cyan;
        	height:300px !important; 
        }
        th, td {
        	min-width: 25px;
        	resize: horizontal;
        	overflow: auto;
        } 
             
        tbody { 
        	height: 30px !important;
        	background-color:green;
        	width: 100%;
        	font-size: 1.45vmin;
        	overflow-y: scroll; 
        }
        	<div style="height:30px;background-color:red;">
            <table>
            <thead>
            <tr><td>header1</td><td>header2</td><td>header3</td><td>header4</td><td>header5</td></tr>
            </thead>
            <tbody>
        	<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	
        	</tbody>
            </table>
        	</div>
like image 618
Max Alexander Hanna Avatar asked Jan 04 '19 18:01

Max Alexander Hanna

People also ask

How do I make table columns resizable in HTML?

In order to allow user to resize col , we have to handle three events: mousedown on the resizer: Track the current position of mouse. mousemove on document : Calculate how far the mouse has been moved, and adjust the width of the column. mouseup on document : Remove the event handlers of document.

How do you make a table header resizable?

Here is a solution using the CSS position: sticky attribute with resize: horizontal . The resizable table headers will show a small icon in the lower-right hand corner, that you can grab and resize.

How do I make my table header sticky in HTML?

By setting the position property to “sticky” and specifying “0” as a value of the top property for the <th> element. By setting the display to “block” for both <thead> and <tbody> element so that we can apply the height and overflow properties to <tbody>.

How do I create an HTML table with a fixed frozen right column and a scrollable body?

To freeze the row/column we can use a simple HTML table and CSS. HTML: In HTML we can define the header row by <th> tag or we can use <td> tag also. Below example is using the <th> tag. We also put the table in DIV element to see the horizontal and vertical scrollbar by setting the overflow property of the DIV element.

1 Answers

Here is a solution using the CSS position: sticky attribute with resize: horizontal.

The resizable table headers will show a small icon in the lower-right hand corner, that you can grab and resize. (Due to a bug in Chrome, it may be so small you can barely see it...so look closely.)

<html>  

    <style>
.fixed_headers {
  border-collapse: collapse;
  width:100%;
}
.fixed_headers td,
.fixed_headers thead th {
  padding: 5px;
  text-align: left;
}
.fixed_headers thead, textarea {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  position: relative;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}

.fixed_headers thead th {
  position: sticky;
  top: 0;  /* REQUIRED: https://stackoverflow.com/a/43707215 */
  background-color: #333; 
  resize: horizontal;
  overflow: auto;
  min-width: 70px;
}
    </style>

        <div style="height: 300px;overflow: auto;">
        <table class="fixed_headers">
        <thead>
        <tr><th>header 1</th><th>header 2</th><th>header 3</th><th>header 4</th><th>header 5</th></tr>
        </thead>
        <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>

        </tbody>
        </table>
        </div> 
    </html>
like image 143
Ravi Avatar answered Sep 22 '22 07:09

Ravi
Sign in to Comment

Related questions

Is there a way to pass an arraybuffer from javascript to java on Android?
AngularJS ui-router: how to resolve typical data globally for all routes?
Environment Variables in an isomorphic JS app: Webpack find & replace?
Receiving 'Error: Cannot find module' using browserify, gulp, react.js
lodash sortBy then groupBy, is order maintained?
Overlay Play button over video
Uploading Multiple Files to Google Drive with Google App Script
Passing string parameter in JavaScript function
Can't assign this in constructor [duplicate]
Vue.js: watch array length
JavaScript regex to split numbers and letters
How to debug NodeJS(ES6) code in VSCode editor?
React Native ListView scrollToEnd it doesn't work
How to run several commands on precommit with husky npm module?
can't resolve Cannot find module 'rxjs' within typescript/webpack
Wait for forEach with a promise inside to finish
How to configure eslint with nodejs express application
Is there a way to get the model name from a mongoose model instance?
bash: tslint: command not found
Nodejs crypto in typescript file

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!