Scrollable table with automatic column widths - html

Question

I am trying to make a table with a scrollable <tbody> and a fixed <thead>.
I have attempted to do so here https://jsfiddle.net/ghnfzwm6/11/. However, as you can see the <thead> is not lined up with the <tbody>. Also, the scroll wheel is all the way to the right whereas I would like it right next to the table.
Does anyone know how I can fix this without setting fixed widths for the columns?
EDIT: Additionally, top: 0; moves the <thead> to the top of my page which is ok on the fiddle but not normally. However, without it there is a small gap...
EDIT2: I have found this solution https://jsfiddle.net/uo5v0cfw/11/. However, the problem gere is that the furthest right column is cut off by the scroll bar. This can be fixed by changing the overflow-x to auto, but I don't want to have to scroll horizontally...

Answer 1

Css for the #content div is not required. This css is enough for your scrollable table. I added some comments in the css below.
update: added minimum css for mobile support
#content {
}
#tasks-table-wrapper {
width: 800px; /* or use % for the width */
height: 546px;
max-height: 546px;
margin: 0 auto;
overflow-y: scroll; /* only Y axis scroll */
}
#tasks-table-wrapper * {
margin: 0;
padding: 0;
box-sizing: border-box; /* keep content in a TD cell */
}
#tasks {
border-collapse: collapse;
font-size: 0;
}
#tasks, #tasks thead, #tasks tbody, #tasks tr {
width: 100%; /* keep all elements full width */
}
#tasks th, #tasks td {
padding: 20px;
text-align: left;
background-color: #121212;
text-transform: uppercase;
}
#tasks th {
position: sticky; /* keep TH on top */
top: 0;
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
}
#tasks td {
color: #bbb;
font-size: 11px;
letter-spacing: 1px;
}
/* minimum for mobile support */
#media (max-width: 767.9px) {
#tasks-table-wrapper {
max-width: 100%;
}
#tasks {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}

Answer 2

You should try setting the thead to be position: sticky; instead of fixed. When an element is set to have a position of fixed or absolute the browser does not render it as part of its normal containing block. Because your thead is positioned as fixed it isn't being rendered as part of that containing block and thus your tbody is collapsing down to the size of its content. Using sticky will avoid this because it is designed to keep the element as part of the original containing block while allowing it to stick to the page in your determined location.
Just be sure to check browser support and polyfill if needed:
https://caniuse.com/#feat=css-sticky

Answer 3

Try this... add position:relative; to #tasks-table-wrapper.
CSS code
* {
margin: 0;
padding: 0;
}
#content {
overflow: hidden;
height: 100%;
}
#tasks-table-wrapper {
height: 546px;
max-height: 546px;
width: 35%;
overflow-y: scroll;
position: relative;
top: 0;
left: 50%;
transform: translate(-50%, 0px);
}
#tasks-table-wrapper table#tasks {
text-align: left;
text-transform: uppercase;
margin: 0 auto;
width: 100%;
background-color: #121212;
font-size: 0;
}
#tasks-table-wrapper table#tasks thead {
font-size: 13px;
color: #fff;
font-weight: 700;
letter-spacing: 2px;
border-collapse: collapse;
background-color: #121212;
text-align: left;
}
#tasks-table-wrapper table#tasks th {
padding: 20px;
}
#tasks-table-wrapper table#tasks tbody {
font-size: 11px;
color: #bbb;
letter-spacing: 1px;
margin-top: 57px;
}
#tasks-table-wrapper table#tasks tbody tr td {
padding: 20px;
}
HTML Code
<div id="content">
<div id="tasks-table-wrapper">
<table id="tasks">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tbody>
</table>
</div>
</div>

Answer 4

Edit: If you need to preserve the table display properties then you can do something like this:
Add position sticky to your th elements:
#tasks-table-wrapper table#tasks th {
padding: 20px;
position: sticky;
top: 0;
background-color: #121212;
}
And remove the fixed property from your thead element
#tasks-table-wrapper table#tasks thead {
font-size: 13px;
color: #fff;
font-weight: 700;
letter-spacing: 2px;
border-collapse: collapse;
background-color: #121212;
text-align: left;
/* position: fixed; */
/* top: 0; */
}
You may also change the table width to 100% and the wrapper to the desired size:
#tasks-table-wrapper {
height: 546px;
max-height: 546px;
overflow-y: scroll;
width: 90%;
margin: 0 auto;
}
#tasks-table-wrapper table#tasks {
text-align: left;
text-transform: uppercase;
margin: 0 auto;
background-color: #121212;
font-size: 0;
width: 100%;
}
If you don't care about table css properties, change the table elements display property to block or flex, I made a fiddle and a pen, hope it helps.

Answer 5

Try this.
Position sticky in TH (it's better for cross-browser)and border-collapse: collapse; in TABLE.
* {
margin: 0;
padding: 0;
}
#content {
overflow: hidden;
height: 100%;
}
#tasks-table-wrapper {
height: 546px;
max-height: 546px;
overflow-y: scroll;
}
#tasks-table-wrapper table#tasks {
text-align: left;
text-transform: uppercase;
margin: 0 auto;
background-color: #121212;
font-size: 0;
border-collapse: collapse;
}
#tasks-table-wrapper table#tasks thead {
font-size: 13px;
color: #fff;
font-weight: 700;
letter-spacing: 2px;
border-collapse: collapse;
background-color: #121212;
text-align: left;
}
#tasks-table-wrapper table#tasks thead tr {
}
#tasks-table-wrapper table#tasks th {
padding: 20px;
position: sticky;
top: 0;
border: 0;
background-color: #121212;
}
#tasks-table-wrapper table#tasks tbody {
font-size: 11px;
color: #bbb;
letter-spacing: 1px;
margin-top: 57px;
}
#tasks-table-wrapper table#tasks tbody tr {
}
#tasks-table-wrapper table#tasks tbody tr td {
padding: 20px;
}
<div id="content">
<div id="tasks-table-wrapper">
<table id="tasks">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tbody>
</table>
</div>
</div>

Answer 6

Thanks to #bron for providing a jsfiddle with an almost complete solution. The last piece was to make the scrollbar go next to the table which I have done here https://jsfiddle.net/ghnfzwm6/16/.
#content {
...
text-align: center;
}
#tasks-table-wrapper {
width: auto;
...
display: inline-block;
}
And removed
#tasks, #tasks thead, #tasks tbody, #tasks tr {
width: 100%;
}