On a page on a website I'm building, there will only be a table displayed. I want that table to stick to the edges of the screen regardless of the width/height of the screen.
This table also needs to have sticky/fixed headers (so when they scroll down, the headers are still visible), which I'm finding plicates things as the widths and heights seemingly need to be set manually.
Also, it needs to be able to be horizontally scrollable in case there's a ton of columns. I don't want them all to be 10px wide, but the table itself still needs to stick to the edges of the screen as the dimensions change.
It works with keeping the headers sticky as the user scrolls, but the width and height of the elements have to all be set manually, which means it's not responsive whatsoever.
Is this possible at all? I'm not averse to JavaScript, but a pure CSS solution would be slightly preferred.
(JSFiddle)
body {
margin: 0;
padding: 0;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 375px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-border-horizontal-spacing: 0;
}
th,
td {
text-align: left;
padding: 10px 10px;
width: 105px;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
thead {
background-color: black;
color: #fff;
}
thead tr {
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
height: 300px;
}<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>On a page on a website I'm building, there will only be a table displayed. I want that table to stick to the edges of the screen regardless of the width/height of the screen.
This table also needs to have sticky/fixed headers (so when they scroll down, the headers are still visible), which I'm finding plicates things as the widths and heights seemingly need to be set manually.
Also, it needs to be able to be horizontally scrollable in case there's a ton of columns. I don't want them all to be 10px wide, but the table itself still needs to stick to the edges of the screen as the dimensions change.
It works with keeping the headers sticky as the user scrolls, but the width and height of the elements have to all be set manually, which means it's not responsive whatsoever.
Is this possible at all? I'm not averse to JavaScript, but a pure CSS solution would be slightly preferred.
(JSFiddle)
body {
margin: 0;
padding: 0;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 375px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-border-horizontal-spacing: 0;
}
th,
td {
text-align: left;
padding: 10px 10px;
width: 105px;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
thead {
background-color: black;
color: #fff;
}
thead tr {
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
height: 300px;
}<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>4 Answers
Reset to default 0If body height and width is set to 100% it will allow the child (table) to take the whole page.
body{
height: 100%;
width: 100%;
}
table{
height: 100%;
width: 100%;
}
Is this what you are looking for?
https://jsfiddle/6o1gbq6x/
<style>
body {
margin: 0;
padding: 0;
}
.table_container { /*responsive container*/
width: 100%;
margin: 0 auto;
height: 100%;
max-height: 300px;
}
table {
border-collapse: collapse;
width: auto;
-webkit-overflow-scrolling: touch;
-webkit-border-horizontal-spacing: 0;
}
th,
td {
text-align: left;
padding: 10px 10px;
width: 33%;
min-width: 100px;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
thead {
background-color: black;
color: #fff;
}
thead tr {
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
height: 300px;
}
</style>
<div class="table_container">
<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
</div>
If not, please let me know and I'll adjust.
You can use position: fixed in thead tag(in css) to fix the table header at top and for full width set width:100%
position:sticky on the <th> element is the answer.
The widths of the rows are not being set individually, however a min-width can be set on the <th> element.
Otherwise the width of the column will be either:
- The width of the column title (because of
white-space: nowrapon<th>), or - The width of the largest word in a
<td>cell
I have added more columns to demonstrate the horizontal scrolling effect.
body {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px 10px;
}
th {
white-space: nowrap;
/* min-width: 105px; */
}
td {
word-wrap: break-word;
word-break: normal;
}
thead>tr>th {
position: sticky;
top: 0px;
left: 0px;
background-color: black;
color: white;
}<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
<th>A</th>
<th>B</th>
<th>Column</th>
<th>Column</th>
<th>An extremely long title to force horizontal scroll on full screen</th>
<th>An extremely long title to force horizontal scroll on full screen</th>
<th>An extremely long title to force horizontal scroll on full screen</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>