Chrome does not respect display property on table elements

Question

Is there any particular reason why chrome does not respect "display:inline" when it's used on "<table>" and is there a known workaround? Everything works fine in firefox but for some reason chrome refuses to do the right thing when I type

<table style="display:inline;">
    table stuff
</table>

firefox alignment: firefox alignment http://dkarapet.userworld.com/cart_noDB/firefox_alignment.png

chrome alignment: chrome alignment http://dkarapet.userworld.com/cart_noDB/chrome_alignment.png

Both versions use the same html source that sets the display property to inline. The tables individually are not wrapped inside any other div and they are all enclosed inside one big div. Here's the pastie for the relevant part of the html.

Answer 1

Try inline-block.

Answer 2

css 2.1 defines inline-table. No idea how widely supported it is, but it sounds like that might be what you're looking for.

http://www.w3.org/TR/CSS21/tables.html#table-display

Although from your screenshot, it looks like what you really want is control over vertical alignment.

Answer 3

Why on earth would you set a table element to be inline? It should be a display of table. User error IMO.

You'd have to alter the display mode of all the tr and td elements inside otherwise they will improperly render, most likely.

If you need the table to be in the same line as another element, wrap a div around the table and float it. Don't mess with the table.

EDIT: As I specified per my last comment, you should mess with vertical-align and probably set it to top on the tables.

Answer 4

To pull of what you're after, you just need to add this to every td:

<td valign="top">

That will force everything to the top of each cell and will force things to display inline, how you want them to. No CSS needed here.

It SHOULD be coded like this:

<table>
 <tr>
  <td valign="top">item 1 info</td>
  <td valign="top">item 2 info</td>
  <td valign="top">item 3 info</td>
 </tr>
 <tr>
  <td valign="top">item 4 info</td>
  <td valign="top">item 5 info</td>
  <td valign="top">item 6 info</td>
 </tr>
</table>

edit: Or if (for some reason) you're not using TR and TD's you can try this:

<table style="vertical-align:top;">
    table stuff
</table>