Can You Make Ie 9 (Or Earlier) Lay Out Table Elements as If They Were Regular Display:Block Elements

Can you make IE 9 (or earlier) lay out table elements as if they were regular display:block elements?

Adding float:left;clear:left; will make IE 9 behave a bit better, but the width of each element will not be correct. If you add width:100% to the mix, it seems to behave the same as in Chrome and Firefox.

table,
thead,
tfoot,
tbody,
tr,
th,
td {
    display:block;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float:left;
    clear:left;
}

Edit: This has been asked before How can I make "display: block" work on a <td> in IE? and partially covered on How can I get inline-block to render consistently when applied to table cells? which quite rightly mention that any padding will cause the width:100% to create a horizontal scrollbar. However, this can be avoided with box-sizing:border-box;, or by using a suitably lower width or containing element with a fixed width.

How can I get inline-block to render consistently when applied to table cells?

I can't find a way to make IE9 give your desired result with display: inline-block.

Unless your actual use case is somehow different than your simplified test case, you should just be able to switch to float: left on td, which does work:

http://jsbin.com/ujeber/7

floats and inline-block are often interchangeable. But, they both have different strengths and weaknesses. With floats, you have to clear/contain them. With inline-block, you have to deal with extra gaps (commonly fixed by removing whitespace in HTML), and it doesn't work in IE6/7 without further tricks.

internet explorer 8 ignores width for 'display: table-cell' element

After adding the bounty, I ended up working around this problem by targeting my CSS to IE8. I was already using Paul Irish's technique of adding classes to the <html> element using conditional comments:

<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 ielt9"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 ielt9"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

So all I had to do is add an extra CSS rule for IE 8 and lower:

.img-container { display: table-cell; }   /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */

Coupled with the techniques for vertically centring images, this gives me a nice cross-browser solution.

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

How to display the rows (tr) of a table on a single line(Internet Explorer 6,7)?

~~I'm afraid I don't think this can be done in a sane and valid manner. float: left in a table is absolutely taboo.~~ Edit: This seems to be valid (!) and possible by taking away each element's table-* display property, but isn't well supported by IE.

The only workable solution I can think of is manipulating the table elements using JavaScript/jQuery, and making the needed conversions (trs into tds...).

The obvious downside of that is that it won't work with JavaScript turned off.

IE6 CSS display:table fix?

Sorry. There isn't a fix to make IE6 support CSS display:table. The only way to acheive this layout in IE6 is to actually use <table> elements.

First question: do you really need to support IE6? If you can simply drop support for it, you'll solve yourself a whole ton of problems, including this one. Current global usage of IE6 is below 3%, and even lower in most developed countries.

If you do still need to support IE6, then your most obvious solution is simply to swallow your semantic markup pride and just use a <table> tag.

As described by @Tom, the next best solution is to write your layout using display:inline-block;.

inline-block allows you to define your elements as blocks, but still keep them in the text flow (kinda the way the <img> tag works by default). If you combine this with fixed element widths, and wapper divs around rows, you could acheive something similar to a table, although it may be hard to get it to expand dynamically with the page width.

The one big "gotcha" bug around this is that inline-block only works in IE6/7 for elements that have a default style of display:inline. In other words, it works for a <span> but not for a <div>. Not a disaster, but something to be aware of, especially since you're specifically asking about IE6 support. Other than that, the good news is that you should be able to get away with using display:inline-block without any other hacks or work-arounds.

IE not coloring :before as table-cell, why?

This appears to be a bug in IE. If you inspect the element in IE 11 Developer Tools, you see all the declarations for the :before pseudo-element struck out (also e.g. font settings if you add them), but the display and content settings affect the rendering.

To circumvent this bug, it suffices in this simple case to set display: block as @BeatAlex suggests. In a more complicated situation, you probably need more complicated workarounds.

Can You Make Ie 9 (Or Earlier) Lay Out Table Elements as If They Were Regular Display:Block Elements