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

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>