What steps should be taken to transform a transposed table into one that can be scrolled horizontally?

Question

What steps should be taken to transform a transposed table into one that can be scrolled horizontally?

In the process of creating a comparison table for products, I have designed a table with vertical rows. The header is positioned on the left side, with two or more product descriptions displayed in vertical rows within the table body. To accommodate a scenario where the user selects numerous products, I need the table to be horizontally scrollable.

Utilizing CSS from this specific answer, I successfully transformed the table into a vertical layout. However, I am facing difficulties in implementing a horizontal scrollbar within the tbody if the table exceeds the predetermined width. I am searching for a solution akin to this question but tailored to my transposed table.

Currently, this is what I have: JSFiddle. When I limit the table width to 200px, this is the result:

https://i.sstatic.net/4qOGB.png https://i.sstatic.net/Z2t9m.png

html css html-table horizontal-scrolling

Answer 1

Answer №1

Consider using a combination of inline-block and nowrap:

table { border-collapse: collapse; white-space: nowrap; }
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }
tbody, thead { display: inline-block; }

tbody {
  width: 300px;
  overflow-y: hidden;
  overflow-x: auto;
}

<table>
<thead>
  <tr>
      <th>name</th>
      <th>number</th>
  </tr>
</thead>
<tbody>
  <tr>
      <td>James Bond</td>
      <td>007</td>
  </tr>
  <tr>
      <td>Lucipher</td>
      <td>666</td>
  </tr>
  <tr>
      <td>Jon Snow</td>
      <td>998</td>
  </tr>
</tbody>
</table>

table can be displayed as block only if necessary for your layout
To prevent line wrapping, added white-space: nowrap
Displaying tbody and thead as inline-block allows for better element management.

If you want to scroll only the tbody without affecting thead, consider this approach:

table { border-collapse: collapse; white-space: nowrap; }
tr { display: inline-block; }
th, td { display: block; border: 1px solid black; }
tbody, thead { display: inline-block; vertical-align: top; }

tbody {
  width: 150px;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
tbody tr { margin-right: -5px;}

<table>
<thead>
  <tr>
      <th>name</th>
      <th>number</th>
  </tr>
</thead>
<tbody>
  <tr>
      <td>James Bond</td>
      <td>007</td>
  </tr>
  <tr>
      <td>Lucipher</td>
      <td>666</td>
  </tr>
  <tr>
      <td>Jon Snow</td>
      <td>998</td>
  </tr>
</tbody>
</table>

Consider implementing a blocks layout, which you have already partially done except for the HTML structure which is not ideal.

Answer 2

Consider using a combination of inline-block and nowrap:

table { border-collapse: collapse; white-space: nowrap; }
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }
tbody, thead { display: inline-block; }

tbody {
  width: 300px;
  overflow-y: hidden;
  overflow-x: auto;
}

<table>
<thead>
  <tr>
      <th>name</th>
      <th>number</th>
  </tr>
</thead>
<tbody>
  <tr>
      <td>James Bond</td>
      <td>007</td>
  </tr>
  <tr>
      <td>Lucipher</td>
      <td>666</td>
  </tr>
  <tr>
      <td>Jon Snow</td>
      <td>998</td>
  </tr>
</tbody>
</table>

table can be displayed as block only if necessary for your layout
To prevent line wrapping, added white-space: nowrap
Displaying tbody and thead as inline-block allows for better element management.

If you want to scroll only the tbody without affecting thead, consider this approach:

table { border-collapse: collapse; white-space: nowrap; }
tr { display: inline-block; }
th, td { display: block; border: 1px solid black; }
tbody, thead { display: inline-block; vertical-align: top; }

tbody {
  width: 150px;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
tbody tr { margin-right: -5px;}

<table>
<thead>
  <tr>
      <th>name</th>
      <th>number</th>
  </tr>
</thead>
<tbody>
  <tr>
      <td>James Bond</td>
      <td>007</td>
  </tr>
  <tr>
      <td>Lucipher</td>
      <td>666</td>
  </tr>
  <tr>
      <td>Jon Snow</td>
      <td>998</td>
  </tr>
</tbody>
</table>

Consider implementing a blocks layout, which you have already partially done except for the HTML structure which is not ideal.

Answer 3

Answer №2

While it may not conform to standard HTML, a potential solution could involve enclosing the tbody within a div element and applying the desired width and overflow-x styles to the div.

Answer 4

While it may not conform to standard HTML, a potential solution could involve enclosing the tbody within a div element and applying the desired width and overflow-x styles to the div.

What steps should be taken to transform a transposed table into one that can be scrolled horizontally?

Answer №1

Answer №2

Similar questions

Selecting objects within a small three.js view

What makes it possible for Vue v3 to handle variables that are undefined?

Bootstrap offers an improved method for arranging elements in columns and rows, especially when you need to omit certain ones

Create a Bootstrap 5 app with a two-column layout, featuring a fullscreen display and scrolling

use css to align multiple div elements

How can a functional component be created in VueJS using x-templates?

Converting HTML table data into a JavaScript array

I attempted to connect my JavaScript file to my HTML file, but unfortunately, no changes are taking place

Removing inline elements from a Bootstrap dropdown can be achieved by customizing the dropdown

Showing data from a JavaScript controller's JSON response in an HTML table

Combining four numbers to calculate a total with the click of a button

spacing between elements vertically

Display the output of an array in JavaScript within the same document

Having difficulty integrating a Hangout button using APIs on my webpage

Struggling to display the array after adding a new item with the push method

Issues arise when using Bootstrap-select with multiple options

Prevent pinch zoom in webkit (or electron)

Complete Navigation Bar Expands Alongside Drop-down Menu

What could be causing the CSS transition to fail when the menu button is clicked?

Using jQuery to dynamically add or remove CSS classes to an element based on the selected radio button