Is it possible to enable horizontal scrolling for specific columns within a table?

Question

Is it possible to enable horizontal scrolling for specific columns within a table?

I am facing an issue where I need to freeze a column in a table and have the other columns scroll horizontally. To better explain, here is a visual representation:

https://i.sstatic.net/Y5MP9.png

My attempt to use overflow scroll did not seem to work:

.horizontal-scrolling {
  display: flex;
  width: 500px;
  overflow: scroll;
}

.horizontal-scrolling th {
  width: 250px;
}

<table>
    <thead>
        <tr>
            <th>First</th>
            <span class="horizontal-scrolling">
                <th>Second</th>
                <th>Third</th>
                <th>Fourth</th>
            </span>
        </tr>
    <thead>
</table>

javascript html css

Answer 1

Answer №1

I have customized the standard table from W3Schools to ensure that one column remains fixed to the left. This type of design can be implemented on a specific column of your table using JavaScript

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 1000px;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
tr th:nth-of-type(1),/*this is where the table column gets its*/
tr td:nth-of-type(1){/*styling to stick to the left and stay on top of the rest*/
position:sticky;
left: 0;
z-index: 1;
background: white;
width: 150px
}
div {
width: 600px;
overflow: auto;
}

<body>

<h2>HTML Table</h2>
<div>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</div>
</body>

Answer 2

I have customized the standard table from W3Schools to ensure that one column remains fixed to the left. This type of design can be implemented on a specific column of your table using JavaScript

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 1000px;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
tr th:nth-of-type(1),/*this is where the table column gets its*/
tr td:nth-of-type(1){/*styling to stick to the left and stay on top of the rest*/
position:sticky;
left: 0;
z-index: 1;
background: white;
width: 150px
}
div {
width: 600px;
overflow: auto;
}

<body>

<h2>HTML Table</h2>
<div>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</div>
</body>

Is it possible to enable horizontal scrolling for specific columns within a table?

Answer №1

Similar questions

Can you spot the real transformation happening?

Can you explain the distinction between using <router-view/> and <router-view></router-view>?

Implementing alpha value rounding within CSS color functions

Error 404 occurred when trying to access the webpack file at my website address through next js

Retrieving information from a servlet in JSP and then transmitting it to another servlet using ajax technology

Avoid using the AJAX function if an identical request is already in progress

attach an event listener for the click event

Adjusting the height of a div according to the changing heights of other divs

How can you override the selected classes for menu items in Material-UI using React.js?

Guide to logging out from a website using AngularJS

Is the definition of uniforms present in the THREE.js RawShaderMaterial?

Using the Button within Material-Table to Trigger an OnClick Event

How can I remove a post from a list using AJAX?

Here is a step-by-step guide on how to use JQuery to swap out text with

Is Nuxt's FingerprintJS Module the Ultimate Server and Client Solution?

Including a .css file in ejs

Timeout function not being triggered for mousedown or touchstart event handlers

Extract keys from the string

Issue with parsing JSON object within a React component

CSS for Centering Text and ImageAchieving the perfect alignment