Reputation: 191
My goal is to create a table with certain conditions:
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
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