Horizontal scrolling for some columns in a table?

Question

Within a table I need to 'pin' a column in place and have other other colums horizontally scrollable. Here is a visual example:

I tried using overflow scroll but it appears to do nothing:

.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>

Answer 1

I've modified the w3schools standart table, to where one column sticks to the left. this kind of styling can be applied to a specific column of your table by 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 ontop 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>

Horizontal scrolling for some columns in a table?

Question

1 answers

solution1
1 ACCPTED 2020-06-04 12:37:23

Horizontal scrolling for some columns in a table?

Question

1 answers

solution1 1 ACCPTED 2020-06-04 12:37:23

solution1
1 ACCPTED 2020-06-04 12:37:23