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

Angular protection filter

Looking for assistance navigating through a website's links using Selenium?

Developing a personalized data binding feature with AngularJS and utilizing ng-repeat

Tips for resolving the React Hook Type Error issue

How can one include a URL as a "URL parameter" when using Express?

Is there a glitch preventing the connection between HTML and CSS in Notepad++ even though the link is correct?

"Trouble with Python Selenium: Only extracting the first row while iterating through table data

Update the variable using Ajax after the content has loaded

Displaying dates on the Amcharts category axis for instances with empty data

Problem concerning the window object in a React functional component

Exploring Vue and Webpack: Optimizing global variables for development and production environments

Apply bold formatting to the HTML text only, leaving the EJS variable untouched beside it

Utilize a Java application to log in to a website automatically without the need to click on

adjust variable increment in JavaScript

Guidance on redirecting and displaying the URL retrieved from an API response object in the browser using express and axios

I am attempting to incorporate an NPM package as a plugin in my Next.js application in order to prevent the occurrence of a "Module not found: Can't resolve 'child_process'" error

Activate modifications in a distinct column?

Dynamically changing the date format within the item-text of v-autocomplete in Vuetify

"Troubleshooting the non-functional :before pseudo-element in a Select-Box

Can the axios version be displayed during runtime?