CODEWITHSUNDEEP
csshtml-tablescroll
Yisroel M. Olewski
Yisroel M. Olewski

Reputation: 1628

How to scroll table only in css (horizontal/width)

I'm probably not the first to ask this, but I cannot find a working solution anywhere.

This is an extremely simplified version of my page

<table style="white-space:nowrap;font-size:30px"><tr><td style="background-color:blue">SIDE NAV SIDE NAV</td><td>
  <table style="overflow-y:auto">
  <thead>
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Job Title</th>
  <th>Twitter</th>
  <th>Comment</th>
   
</tr>
  </thead>
  <tbody>
<tr>
  <td data-column="First Name">James</td>
  <td data-column="Last Name">Matman</td>
  <td data-column="Job Title">Chief Sandwich Eater</td>
  <td data-column="Twitter">@james</td>
  <td>Jack and jill wen up the hill</td>
  
</tr>
<tr>
  <td data-column="First Name">Andor</td>
  <td data-column="Last Name">Nagy</td>
  <td data-column="Job Title">Designer</td>
  <td data-column="Twitter">@andornagy</td>
  <td>Jack and jill wen up the hill</td>
</tr>
<tr>
  <td data-column="First Name">Tamas</td>
  <td data-column="Last Name">Biro</td>
  <td data-column="Job Title">Game Tester</td>
  <td data-column="Twitter">@tamas</td>
   <td>Jack and jill wen up the hill</td>
</tr>
<tr>
  <td data-column="First Name">Zoli</td>
  <td data-column="Last Name">Mastah</td>
  <td data-column="Job Title">Developer</td>
  <td data-column="Twitter">@zoli</td>
  <td>Jack and jill wen up the hill</td>
</tr>
<tr>
  <td data-column="First Name">Szabi</td>
  <td data-column="Last Name">Nagy</td>
  <td data-column="Job Title">Chief Sandwich Eater</td>
  <td data-column="Twitter">@szabi</td>
  <td>Jack and jill wen up the hill</td>
</tr>
  </tbody>
</table>   </td></tr></table>

Now I want that only the table should scroll. The side nav should always be visible.

I also tried a div version with flex, instead of a table, but the same issue exists.

here is the div version

<div style="white-space:nowrap;display:flex;font-size:30px"><div style="background-color:blue">SIDE NAV SIDE NAV</div><div>
  <table style="overflow-y:auto">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Twitter</th>
      <th>Comment</th>       
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="First Name">James</td>
      <td data-column="Last Name">Matman</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@james</td>
      <td>Jack and jill wen up the hill</td>
      
    </tr>
    <tr>
      <td data-column="First Name">Andor</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Designer</td>
      <td data-column="Twitter">@andornagy</td>
      <td>Jack and jill wen up the hill</td>
    </tr>
    <tr>
      <td data-column="First Name">Tamas</td>
      <td data-column="Last Name">Biro</td>
      <td data-column="Job Title">Game Tester</td>
      <td data-column="Twitter">@tamas</td>
       <td>Jack and jill wen up the hill</td>
    </tr>
    <tr>
      <td data-column="First Name">Zoli</td>
      <td data-column="Last Name">Mastah</td>
      <td data-column="Job Title">Developer</td>
      <td data-column="Twitter">@zoli</td>
      <td>Jack and jill wen up the hill</td>
    </tr>
    <tr>
      <td data-column="First Name">Szabi</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@szabi</td>
      <td>Jack and jill wen up the hill</td>
    </tr>
  </tbody>
</table>   </div>

If I put a hard-coded fixed width to the table then it works okay. But of course I don't want a fixed width. It has to work for any size screen/browser.

How can this be accomplished?

FWIW: here are the 2 versions in codepen

table: https://codepen.io/yisman/pen/LYLKzbw

div: https://codepen.io/yisman/pen/GREbMON

Thanks

Upvotes: 0

Views: 39

Answers (2)

Yossi Sternlicht
Yossi Sternlicht

Reputation: 1030

For the div solution, just wrap the div surrounding the inner table with a overflow:auto. That will create the scroll on the table itself.

<div style="white-space:nowrap;display:flex;font-size:30px"><div style="background-color:blue">SIDE NAV SIDE NAV</div><div style="overflow:auto;">
  <table style="overflow-y:auto">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Twitter</th>
      <th>Comment</th>       
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="First Name">James</td>
      <td data-column="Last Name">Matman</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@james</td>
      <td>Jack and jill wen up the hill</td>
      
    </tr>
    <tr>
      <td data-column="First Name">Andor</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Designer</td>
      <td data-column="Twitter">@andornagy</td>
      <td>Jack and jill wen up the hill</td>
    </tr>
    <tr>
      <td data-column="First Name">Tamas</td>
      <td data-column="Last Name">Biro</td>
      <td data-column="Job Title">Game Tester</td>
      <td data-column="Twitter">@tamas</td>
       <td>Jack and jill wen up the hill</td>
    </tr>
    <tr>
      <td data-column="First Name">Zoli</td>
      <td data-column="Last Name">Mastah</td>
      <td data-column="Job Title">Developer</td>
      <td data-column="Twitter">@zoli</td>
      <td>Jack and jill wen up the hill</td>
    </tr>
    <tr>
      <td data-column="First Name">Szabi</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@szabi</td>
      <td>Jack and jill wen up the hill</td>
    </tr>
  </tbody>
</table>   </div>

Obviously, the html needs adjusting, with correctly matching div tags.

Upvotes: 1

Ihor
Ihor

Reputation: 1244

I don't know you mean this, but hope it could help you.

.container {
  width: 100%;
  overflow: scroll;
}
.sidebar {
  position: sticky;
  top: 0;
  left: 0;
}
<div class="container" style="white-space:nowrap;display:flex;font-size:30px"><div class="sidebar" style="background-color:blue">SIDE NAV SIDE NAV</div><div>
  <table style="overflow-y:auto">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Twitter</th>
      <th>Comment</th>       
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="First Name">James</td>
      <td data-column="Last Name">Matman</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@james</td>
      <td>Jack and jill wen up the hill</td>
      
    </tr>
    <tr>
      <td data-column="First Name">Andor</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Designer</td>
      <td data-column="Twitter">@andornagy</td>
      <td>Jack and jill wen up the hill</td>
    </tr>
    <tr>
      <td data-column="First Name">Tamas</td>
      <td data-column="Last Name">Biro</td>
      <td data-column="Job Title">Game Tester</td>
      <td data-column="Twitter">@tamas</td>
       <td>Jack and jill wen up the hill</td>
    </tr>
    <tr>
      <td data-column="First Name">Zoli</td>
      <td data-column="Last Name">Mastah</td>
      <td data-column="Job Title">Developer</td>
      <td data-column="Twitter">@zoli</td>
      <td>Jack and jill wen up the hill</td>
    </tr>
    <tr>
      <td data-column="First Name">Szabi</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@szabi</td>
      <td>Jack and jill wen up the hill</td>
    </tr>
  </tbody>
</table>   </div>

Upvotes: 0

Related Questions