syydi
syydi

Reputation: 191

Horizontal scrollbar hidden under vertical overflow

My goal is to create a table with certain conditions:

  1. If display width is too small to fit contents, add horizontal scrollbar and do not shrink cells.
  2. If display height is too small to fit contents, add vertical scrollbar and do not shrink cells.

I managed to achieve this, but I have a problem where if both display width and height are too small to fit contents, the vertical scrollbar is perfect, but horizontal scrollbar is hidden under the vertical overflow. So if a user would like to see the entire first row, he/she needs to scroll vertically to the end, then scroll horizontally to the end, and finally scroll vertically back up to see the first row.
Here is a JSFiddle example: https://jsfiddle.net/totsik/fr24Ldyb/7/
CSS and HTML:

.main-container {
   background-color: #222C2A;
   color: #F3EED9;
   margin: 3rem 5%;
}

.container {
   overflow-y: auto;
   padding: 2rem;
   min-height: 50vh;
   max-height: 70vh;
   border: 2px solid #222C2A;
}

table {
   overflow-x: auto;
   display: block;
   border-collapse: collapse;
   width: 100%;
}

tr.table-head-row th {
   border-style: solid;
   border-width: 2px 0;
   border-color: #F3EED9;
}

tr td {
   text-align: center;
}

tr td:first-child {
   text-align: left;
}

th {
   width: 100%;
   background: #222C2A;
   text-align: left;
   padding: 1rem 2rem;
}

td {
   font-size: 1rem;
   padding: 0.75rem 1.5rem;
   background-color: #F3EED9;
   color: #222C2A;
}
<div class="main-container">
   <div class="container">
      <table>
         <thead>
            <tr class="table-head-row">
               <th class="">header 1</th>
               <th class="">header 2</th>
               <th class="">header 3</th>
               <th class="">header 4</th>
               <th></th>
            </tr>
         </thead>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
      </table>
   </div>
</div>

What I would like to happen is that if both height and width are too small, the scrollbars will be both visible. How should I change my code to accomplish this?

UPDATE: updated jsfiddle. Also forgot to mention that I would like the to be vertical scrollbar on the container div not the table itself.

Upvotes: 0

Views: 78

Answers (1)

Paul Foster
Paul Foster

Reputation: 1

The fiddle example has a max-height in table which the text above does not. Change the max-height in table

table {
   overflow-x: auto;
   display: block;
   border-collapse: collapse;
   width: 100%;
   max-height: 50vh;
}

and both bars show

Upvotes: 0

Related Questions