Displaying DIV like a table

[jb13]

Hi everyone,

I readed some articles on the web on how to display DIV elements in a table format. All these articles said the same thing, that this code should display a table with a single line and 3 columns because display:table = <table>,
display:table-row = <tr>, and display:table-cell = <td>.

<div style="display: table">
	<div style="display: table-row">
		<div style="display: table-cell">1</div>
		<div style="display: table-cell">2</div>
		<div style="display: table-cell">3</div>
	</div>
</div>

But when i test it, it doesn't work, even the example in these articles is not working, and i use IE 6.0

Someone can tell me what's wrong ?

 

[Vragabond]

IE supports only [tt]inline, block and none[/tt] for display values. Anyway, what you are doing is complete and utter nonsense and you should either:

1. Use actual table tags if it is tabular data you're having.
2. Re-think your page not to use table for layout.

 

[jb13]

Of course this was just a sample, because in my real page the style attribute will be replaced by a class and i would like to have the information sometimes displayed in a row, sometime displayed in a column, depending on which css sheet is loaded with the page.

Anyway i know now why it was not working, thank you.

 

[traingamer]

... Internet Explorer doesn’t support the display:table, display:table-row and display:table-cell properties...

See discussion and example at Equal height boxes with css at 456 Berea Street.



Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[dkdude]

You could do it this way:

<div id="myTable">
    <div id="myRow">
        <div style="float:left">1</div>
        <div style="float:left">2</div>
        <div style="float:left>3</div>
    </div>
</div>

Please note that the id's are only to identify what's what ;-)