Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

Question

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/:

https://i.stack.imgur.com/svzIg.png

This table should have two scrollbars, one for the light blue SCROLL column and another for the light green SCROLL2 column. Each scrollbar should only affect its respective column and scroll the entire column at once. The Row and Sec Row columns should remain the same width and not be affected by the scroll.

<table>
    <tr>
      <th class="headcol">1</th>
      <td class="long1">SCROLL SCROLL SCROLL SCROLL</td>
      <th class="middlecol">1</th>
      <td class="long2">SCROLL2 SCROLL2 SCROLL2 SCROLL2</td>
    </tr>
    <tr>
      <th class="headcol">2</th>
      <td class="long1">SCROLL SCROLL SCROLL SCROLL</td>
      <th class="middlecol">2</th>
      <td class="long2">SCROLL2 SCROLL2 SCROLL2 SCROLL2</td>
    </tr>
  </table>

Can someone guide me on how to add a scrollbar that specifically scrolls one column in an HTML table?

javascript html css html-table

Answer 1

Answer №1

To achieve the desired outcome, I created a piece of JavaScript code to modify the table structure in such a way that the column width could be set to show only one scrollbar at the bottom.

 const classes = ['headcol', 'long1', 'middlecol', 'long2']
  
 const modifiedTable = document.createElement("table");
 modifiedTable.setAttribute("id", "modifiedTable");
 const row = document.createElement('tr');
 
 classes.forEach((c, idx) => {
   const cell = document.createElement(idx % 2 === 0 ? 'th' : 'td');
   cell.setAttribute('class', `${c}new`)
   const div = document.createElement('div');
   const subTable = document.createElement('table');

   const nodes = document.querySelectorAll(`.${c}`);
   nodes.forEach(n => {
      const newRow = document.createElement("tr");
      newRow.appendChild(n);
      subTable.appendChild(newRow);
   });

   div.appendChild(subTable)
   cell.appendChild(div)
   row.appendChild(cell);
 });
 
 modifiedTable.appendChild(row);
 document.body.appendChild(modifiedTable);

.headcolnew, .middlecolnew {
  vertical-align: top;
}

.long1new, .long2new {
  max-width: 125px;
  overflow-x: scroll;
  white-space: nowrap;
}

<table>
    <tr>
      <th class="headcol">1</th>
      <td class="long1">SCROLL SCROLL SCROLL SCROLL</td>
      <th class="middlecol">1</th>
      <td class="long2">SCROLL2 SCROLL2 SCROLL2 SCROLL2</td>
    </tr>
    <tr>
      <th class="headcol">2</th>
      <td class="long1">SCROLL SCROLL SCROLL SCROLL</td>
      <th class="middlecol">2</th>
      <td class="long2">SCROLL2 SCROLL2 SCROLL2 SCROLL2</td>
    </tr>
  </table>

Answer 2

To achieve the desired outcome, I created a piece of JavaScript code to modify the table structure in such a way that the column width could be set to show only one scrollbar at the bottom.

 const classes = ['headcol', 'long1', 'middlecol', 'long2']
  
 const modifiedTable = document.createElement("table");
 modifiedTable.setAttribute("id", "modifiedTable");
 const row = document.createElement('tr');
 
 classes.forEach((c, idx) => {
   const cell = document.createElement(idx % 2 === 0 ? 'th' : 'td');
   cell.setAttribute('class', `${c}new`)
   const div = document.createElement('div');
   const subTable = document.createElement('table');

   const nodes = document.querySelectorAll(`.${c}`);
   nodes.forEach(n => {
      const newRow = document.createElement("tr");
      newRow.appendChild(n);
      subTable.appendChild(newRow);
   });

   div.appendChild(subTable)
   cell.appendChild(div)
   row.appendChild(cell);
 });
 
 modifiedTable.appendChild(row);
 document.body.appendChild(modifiedTable);

.headcolnew, .middlecolnew {
  vertical-align: top;
}

.long1new, .long2new {
  max-width: 125px;
  overflow-x: scroll;
  white-space: nowrap;
}

<table>
    <tr>
      <th class="headcol">1</th>
      <td class="long1">SCROLL SCROLL SCROLL SCROLL</td>
      <th class="middlecol">1</th>
      <td class="long2">SCROLL2 SCROLL2 SCROLL2 SCROLL2</td>
    </tr>
    <tr>
      <th class="headcol">2</th>
      <td class="long1">SCROLL SCROLL SCROLL SCROLL</td>
      <th class="middlecol">2</th>
      <td class="long2">SCROLL2 SCROLL2 SCROLL2 SCROLL2</td>
    </tr>
  </table>

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

Answer №1

Similar questions

Height of Owl Carousel on mobile devices

Use CSS and JavaScript to create a visually appealing and interactive tree structure. Give the tree a dynamic design

Is it necessary to reset (local storage, session storage) once the countdown timer reaches zero?

Issues with Adaptive Headers

Guide on comparing an object against an array and retrieving a specific output

Tips for locating a file within an input element in HTML using jQuery

What is the best way to ensure an image is responsive in CSS and aligns perfectly in height with its neighboring text?

Setting up pagination for displaying data from a database on the client-side: a step-by-step guide

Using CSS to position elements absolutely while also adjusting the width of the div

Having issues with implementing CSS3 animations on my webpage

Combining two divs to share the same linear gradient and shadow effect

Tips for utilizing ion view within an ionic 2 application

Rotating an image as it approaches the footer: a step-by-step guide

The connection between an HTML form and PHP is not being established

Ensure history.back() does not trigger Confirm Form Resubmission

Placing the input-group-addon above the text-input for better positioning

Node.js client-sessions malfunction when not utilized as a primary callback

Streamlining the process of implementing click events on elements selected by class using jQuery

Tips for creating a seamless horizontal scrolling effect in Angular when hovering (automatically)

Menu drop down offset in Internet Explorer 7