Table Tbody Scroll in IE8

Table tbody scroll in IE8

I found two ways to solve this problem in IE8.

1) Adding extra td element of width: 0px to tr's of thead and tbody.

IE8 demo

2) Adding a hidden letter to content of after pseudo selector.

    tr:after{
        content: ".";
        visibility: hidden;
    }

I added the above in conditional css. because the problem was only in IE8. (I haven't tested in IE9+)

    <!--[if IE 8]>
         <style>
             /* the above css code here */
         </style>
    <![endif]-->

IE8 demo

I used the latter one because it is simple.

how can i convert table row and columns a scroll table at ie8?

I tried to search and found that CSS only examples use Flex and Grid which is not supported in IE 8 browser.

As a workaround, you can try to use the Javascript code to convert table row to column.

Example:

<!doctype html><html><head><style>#btn, #tbl2container {margin-top: 10px;}td {    padding: 5px;    border: 1px dotted gray;}</style>
</head><body><div id="table_container">    <table id="tbl1">        <tr>            <td>A1</td>            <td>A2</td>            <td>A3</td>            <td>A4</td>            <td>A5</td>        </tr>        <tr>            <td>B1</td>            <td>B2</td>            <td>B3</td>            <td>B4</td>            <td>B5</td>        </tr>        <tr>            <td>C1</td>            <td>C2</td>            <td>C3</td>            <td>C4</td>            <td>C5</td>        </tr>    </table></div><button id="btn" onclick="clk()">Convert Table</button><div id="tbl2container"></div><script>function convertTable(tbl) {    var rows = tbl.rows.length;    var cols = tbl.rows[0].cells.length;    var tbl2 = document.createElement('table');
    for (var i = 0; i < cols; i++) {        var tr = document.createElement('tr');        for (var j = 0; j < rows; j++) {            var td = document.createElement('td');            var tdih = tbl.rows[j].cells[i].innerHTML;            td.innerHTML = tdih;            tr.appendChild(td);        }        tbl2.appendChild(tr);    }    return tbl2;}
//testvar btn = document.getElementById('btn');
function clk() {    this.disabled = true;    var t1 = document.getElementById('tbl1');    var t2 = convertTable(t1);    document.getElementById('tbl2container').appendChild(t2);}</script></body></html>

Table with fixed header in IE8

There seems to be lots of answers to this already

Table tbody scroll in IE8

How can I let a table's body scroll but keep its head fixed in place?

<th style="width:0px;"></th>

This existing fiddle seems to solve it but check out the other suggestions in the links above- http://jsfiddle.net/venkateshwar/X8FSw/17/show/

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):

vertical scroll inside tbody

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:

Fluid Table with vertical scroll inside tbody

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:

Table with Fixed Width

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

IE not allowing tbody height to be set

It appears that it is simply an issue with IE not respecting tbody (or table for that matter) height css property. I could not for the life of me style the height for table or tbody elements in IE. You can see in this answer, that the last comment mentions it does not work for IE.

table tbody scrollable?

You have taken on a task that, if you succeed, will make you a hero. I tried this and the straightforward thing -- to position:fixed; the <thead> -- is impossible. I had to copy all of the <thead> into a new object. But when you do that, the horizontal spacing of the <th> elements all goes away so the headings don't line up with the <td>s anymore. I ended up doing something like this:

First of all, abandon ie6 and ie7. There's no hope for those guys.

Make two copies of the table, one where the body is invisible and the <thead> is visible, and the other where it's vice-versa.
Give z-index:1; to the table with the visible <thead>.
Give z-index:0; to the table with the visible <tbody>.
Deal with horizontal scrolling, but not until after you find that onScroll isn't an ie8 event (not to mention ie6), so that you have to take a setInterval break every tenth of a second or so just to handle scrolling the <thead> left and right in ie8.

This will give you a table body of infinite scroll in both axes, with a table head that scrolls in the x axis only. Pretty much works in FF, Chrome, and Safari. But is shaky in ie8. A real pita.

Good luck, and please write if you get this to work!

Table Tbody Scroll in IE8