Table scroll with HTML and CSS
Table with Fixed Header
<table cellspacing="0" cellpadding="0" border="0" width="325"> <tr> <td> <table cellspacing="0" cellpadding="1" border="1" width="300" > <tr style="color:white;background-color:grey"> <th>Header 1</th> <th>Header 2</th> </tr> </table> </td> </tr> <tr> <td> <div style="width:320px; height:80px; overflow:auto;"> <table cellspacing="0" cellpadding="1" border="1" width="300" > <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> <tr> <td>new item</td> <td>new item</td> </tr> </table> </div> </td> </tr></table>
How do I make a table scrollable
You need to declare a height first, else your table will expand to the according width of its content.
table{
overflow-y:scroll;
height:100px;
display:block;
}
EDIT: after clarifying your problem I edited the fiddle:
check out this Example or that way. It's rather hacky and not guaranteed to work crossbrowser but might work for your case.
HTML table with 100% width, with vertical scroll inside tbody
In order to make <tbody>
element scrollable, we need to change the way it's displayed on the page i.e. using display: block;
to display that as a block level element.
Since we change the display
property of tbody
, we should change that property for thead
element as well to prevent from breaking the table layout.
So we have:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
Web browsers display the thead
and tbody
elements as row-group (table-header-group
and table-row-group
) by default.
Once we change that, the inside tr
elements doesn't fill the entire space of their container.
In order to fix that, we have to calculate the width of tbody
columns and apply the corresponding value to the thead
columns via JavaScript.
Auto Width Columns
Here is the jQuery version of above logic:
// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
And here is the output (on Windows 7 Chrome 32):
WORKING DEMO.
Full Width Table, Relative Width Columns
As the Original Poster needed, we could expand the table
to 100% of width
of its container, and then using a relative (Percentage) width
for each columns of the table.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Since the table has a (sort of) fluid layout, we should adjust the width of thead
columns when the container resizes.
Hence we should set the columns' widths once the window is resized:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
The output would be:
WORKING DEMO.
Browser Support and Alternatives
I've tested the two above methods on Windows 7 via the new versions of major Web Browsers (including IE10+) and it worked.
However, it doesn't work properly on IE9 and below.
That's because in a table layout, all elements should follow the same structural properties.
By using display: block;
for the <thead>
and <tbody>
elements, we've broken the table structure.
Redesign layout via JavaScript
One approach is to redesign the (entire) table layout. Using JavaScript to create a new layout on the fly and handle and/or adjust the widths/heights of the cells dynamically.
For instance, take a look at the following examples:
- jQuery .floatThead() plugin (a floating/locked/sticky table header plugin)
- jQuery Scrollable Table plugin. (source code on github)
- jQuery .FixedHeaderTable() plugin (source code on github)
- DataTables vertical scrolling example.
Nesting tables
This approach uses two nested tables with a containing div. The first table
has only one cell which has a div
, and the second table is placed inside that div
element.
Check the Vertical scrolling tables at CSS Play.
This works on most of web browsers. We can also do the above logic dynamically via JavaScript.
Table with fixed header on scroll
Since the purpose of adding vertical scroll bar to the <tbody>
is displaying the table header at the top of each row, we could position the thead
element to stay fixed
at the top of the screen instead.
Here is a Working Demo of this approach performed by Julien.
It has a promising web browser support.
And here a pure CSS implementation by Willem Van Bockstal.
The Pure CSS Solution
Here is the old answer. Of course I've added a new method and refined the CSS declarations.
Table with Fixed Width
In this case, the table
should have a fixed width
(including the sum of columns' widths and the width of vertical scroll-bar).
Each column should have a specific width and the last column of thead
element needs a greater width which equals to the others' width + the width of vertical scroll-bar.
Therefore, the CSS would be:
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
Here is the output:
WORKING DEMO.
Table with 100% Width
In this approach, the table
has a width of 100%
and for each th
and td
, the value of width
property should be less than 100% / number of cols
.
Also, we need to reduce the width of thead
as value of the width of vertical scroll-bar.
In order to do that, we need to use CSS3 calc()
function, as follows:
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
Here is the Online Demo.
Note: This approach will fail if the content of each column breaks the line, i.e. the content of each cell should be short enough.
In the following, there are two simple example of pure CSS solution which I created at the time I answered this question.
Here is the jsFiddle Demo v2.
Old version: jsFiddle Demo v1
Responsive table scroll with CSS only
I changed a little bit your code but I think this is what you want to achieve (open it in full page view to check how overflow works):
.main-wrapper{ width: 100%; border: 1px solid #ff0000; overflow-x: auto; padding: 0 30px; box-sizing: border-box;}
.responsive-table{ display: inline-block; min-width: 100%; box-sizing: border-box;}
.responsive-table > table { width: 100%; border-collapse: collapse;}
.responsive-table > table td, th { border: 1px solid #cccccc; padding: 8px; font-family: Arial; font-size: 16px;}
<div class="main-wrapper"><div class="responsive-table"><table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">second</th> <th scope="col">third</th> <th>column</th> <th>column</th> <th>@column</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>column</td> <td>column</td> <td>column</td> <td>column</td> <td>column</td> <td>@column</td> </tr> <tr> <th scope="row">2</th> <td>column</td> <td>column</td> <td>column</td> <td>column</td> <td>column</td> <td>@column</td> </tr> <tr> <th scope="row">3</th> <td>column</td> <td>column</td> <td>@column</td> <td>column</td> <td>column</td> <td>@column</td> </tr> </tbody></table></div></div>
How to make scrollable single line td for html table
The overflow: hidden
overridden the scrollbar.
td {
padding: 5px;
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
<table [border]="1" style="width:100%; table-layout:fixed;">
<tr>
<td>
Short text.
</td>
<td>
Long text. Long text. Long text. Long text. Long text. Long text. Long text.
</td>
<td>
Long text. Long text. Long text. Long text. Long text. Long text. Long text.
</td>
</tr>
</table>
Horizontal scroll on overflow of table
I think your overflow
should be on the outer container. You can also explicitly set a min width for the columns. Like this:
.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }
Fiddle: http://jsfiddle.net/5WsEt/
how to make a table scrollable with html + Tailwind CSS
Wrap your table with a div with overflow-x class and your required width, and add w-full class to your table class.
<div class='overflow-x'>
<table class='table-auto overflow-scroll w-full'>
<thead>
<tr class='bg-gray-100'>
<th class='w-20 px-4 py-2'>No.</th>
<th class='px-4 py-2'>First Name</th>
<th class='px-4 py-2'>Second Name</th>
<th class='px-4 py-2'>Third Name</th>
<th class='px-4 py-2'>Department</th>
<th class='px-4 py-2'>Stage</th>
<th class='px-4 py-2'>Email</th>
<th class='px-4 py-2'>Roles</th>
<th class='px-4 py-2'>status</th>
<th class='px-4 py-2'>University Email</th>
<th class='px-4 py-2'>University Password</th>
<th class='px-4 py-2'>Students Files</th>
<th class='px-4 py-2'>Actions</th>
</tr>
</thead>
<tbody>
@if(isset($users))
@include('dashboard.users.partials.users_details') @endif
@if(isset($searches))
@include('dashboard.users.partials.search') @endif
@if(isset($statusSearch))
@include('dashboard.users.partials.status_search') @endif
</tbody>
</table>
</div>
add scroll bar to table body
you can wrap the content of the <tbody>
in a scrollable <div>
:
html
....
<tbody>
<tr>
<td colspan="2">
<div class="scrollit">
<table>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
...
css
.scrollit {
overflow:scroll;
height:100px;
}
see my jsfiddle, forked from yours: http://jsfiddle.net/VTNax/2/
Related Topics
Youtube: How to Present Embed Video with Sound Muted
How to Rename HTML "Browse" Button of an Input Type=File
Add Hyperlink to Textblock Wpf
Can Comments Appear Before the Doctype Declaration
How to Do Awesome Refreshless Page Changes Like Github Do
How to Stretch Flex Child to Fill Height of the Container
Why Does a Filter Gradient on a Pseudo Element Not Work in IE8
Input Type Datetime - Value Format
How to Maintain Scroll Position in MVC
What Makes the Text on a <Button> Element Vertically Centered
Why Should I Not Use HTML Frames
Why Doesn't "Display: Block" & "Width: Auto" Stretch a Button to Fill the Container
Embed a Powerpoint in a Web Page
Manipulating External Svg File Style Properties with CSS
Making a Div That Covers the Entire Page
Equal Sized Table Cells to Fill the Entire Width of the Containing Table