How to show horizontal scroll when table column resize using CSS and JavaScript

Question

I resize the table columns it don't show the scroll. I don't want to limit the width of columns.

table should be width 100%, when resize the column horizontal scroll should be there.

Resizing is working perfect in Below code. only I need scroll when increase the column width.
Scroll should be hide when decrease the width.

I want same behaviour as ag-grid have( https://plnkr.co/edit/ysULLCfl4UCPmaGm ) but I don't want to use plugin

 document.addEventListener('DOMContentLoaded', function () { const createResizableTable = function (table) { const cols = table.querySelectorAll('th'); [].forEach.call(cols, function (col) { // Add a resizer element to the column const resizer = document.createElement('div'); resizer.classList.add('resizer'); // Set the height resizer.style.height = `${table.offsetHeight}px`; col.appendChild(resizer); createResizableColumn(col, resizer); }); }; const createResizableColumn = function (col, resizer) { let x = 0; let w = 0; const mouseDownHandler = function (e) { x = e.clientX; const styles = window.getComputedStyle(col); w = parseInt(styles.width, 10); document.addEventListener('mousemove', mouseMoveHandler); document.addEventListener('mouseup', mouseUpHandler); resizer.classList.add('resizing'); }; const mouseMoveHandler = function (e) { const dx = e.clientX - x; col.style.width = `${w + dx}px`; }; const mouseUpHandler = function () { resizer.classList.remove('resizing'); document.removeEventListener('mousemove', mouseMoveHandler); document.removeEventListener('mouseup', mouseUpHandler); }; resizer.addEventListener('mousedown', mouseDownHandler); }; createResizableTable(document.getElementById('resizeMe')); });

 .table { border-collapse: collapse; }.table, .table th, .table td { border: 1px solid #ccc; }.table th, .table td { padding: 0.5rem; }.table th { position: relative; }.resizer { position: absolute; top: 0; right: 0; width: 5px; cursor: col-resize; user-select: none; }.resizer:hover, .resizing { border-right: 2px solid blue; }.resizable { border: 1px solid gray; height: 100px; width: 100px; position: relative; }

 <body> <table id="resizeMe" class="table"> <thead> <tr> <th>No.</th> <th>First name</th> <th>Last name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Andrea</td> <td>Ross</td> </tr> <tr> <td>2</td> <td>Penelope</td> <td>Mills</td> </tr> <tr> <td>3</td> <td>Sarah</td> <td>Grant</td> </tr> <tr> <td>4</td> <td>Vanessa</td> <td>Roberts</td> </tr> <tr> <td>5</td> <td>Oliver</td> <td>Alsop</td> </tr> <tr> <td>6</td> <td>Jennifer</td> <td>Forsyth</td> </tr> <tr> <td>7</td> <td>Michelle</td> <td>King</td> </tr> <tr> <td>8</td> <td>Steven</td> <td>Kelly</td> </tr> <tr> <td>9</td> <td>Julian</td> <td>Ferguson</td> </tr> <tr> <td>10</td> <td>Chloe</td> <td>Ince</td> </tr> </tbody> </table>

Answer 1

There are 2 things you need to do:

add a fixed width to your <table> element, so it can overflow horizontally.
use table-layout: fixed; on your table element, so the columns don't move around to fit the width around the content.

Below is mostly your logic, but I'll demonstrate that this works.

 document.addEventListener('DOMContentLoaded', function () { const createResizableTable = function (table) { const cols = table.querySelectorAll('th'); const updateTableWidth = () => { table.style.width = [].reduce.call( cols, (sum, col) => sum + parseInt(col.style.width), 0 ) + 'px'; }; [].forEach.call(cols, function (col) { // Add a resizer element to the column const resizer = document.createElement('div'); resizer.classList.add('resizer'); // Set the height resizer.style.height = `${table.offsetHeight}px`; col.appendChild(resizer); createResizableColumn(col, resizer, updateTableWidth); }); updateTableWidth(); }; const createResizableColumn = function (col, resizer, updateTableWidth) { let x = 0; let w = parseInt(window.getComputedStyle(col).width, 10); col.style.width = `${w}px`; const mouseDownHandler = function (e) { x = e.clientX; const styles = window.getComputedStyle(col); w = parseInt(styles.width, 10); document.addEventListener('mousemove', mouseMoveHandler); document.addEventListener('mouseup', mouseUpHandler); resizer.classList.add('resizing'); }; const mouseMoveHandler = function (e) { const dx = e.clientX - x; col.style.width = `${w + dx}px`; updateTableWidth(); }; const mouseUpHandler = function () { resizer.classList.remove('resizing'); document.removeEventListener('mousemove', mouseMoveHandler); document.removeEventListener('mouseup', mouseUpHandler); }; resizer.addEventListener('mousedown', mouseDownHandler); }; createResizableTable(document.getElementById('resizeMe')); });

 .table { border-collapse: collapse; table-layout: fixed; }.table, .table th, .table td { border: 1px solid #ccc; }.table th, .table td { padding: 0.5rem; }.table th { position: relative; }.resizer { position: absolute; top: 0; right: 0; width: 5px; cursor: col-resize; user-select: none; }.resizer:hover, .resizing { border-right: 2px solid blue; }.resizable { border: 1px solid gray; height: 100px; width: 100px; position: relative; }

 <body> <table id="resizeMe" class="table"> <thead> <tr> <th>No.</th> <th>First name</th> <th>Last name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Andrea</td> <td>Ross</td> </tr> <tr> <td>2</td> <td>Penelope</td> <td>Mills</td> </tr> <tr> <td>3</td> <td>Sarah</td> <td>Grant</td> </tr> <tr> <td>4</td> <td>Vanessa</td> <td>Roberts</td> </tr> <tr> <td>5</td> <td>Oliver</td> <td>Alsop</td> </tr> <tr> <td>6</td> <td>Jennifer</td> <td>Forsyth</td> </tr> <tr> <td>7</td> <td>Michelle</td> <td>King</td> </tr> <tr> <td>8</td> <td>Steven</td> <td>Kelly</td> </tr> <tr> <td>9</td> <td>Julian</td> <td>Ferguson</td> </tr> <tr> <td>10</td> <td>Chloe</td> <td>Ince</td> </tr> </tbody> </table>

How to show horizontal scroll when table column resize using CSS and JavaScript

Question

1 answers

solution1
0 2022-02-05 17:31:28

How to show horizontal scroll when table column resize using CSS and JavaScript

Question

1 answers

solution1 0 2022-02-05 17:31:28

solution1
0 2022-02-05 17:31:28