Question

This is the website I’m working on and every other browser displays the table properly, but like always, when it comes to IE (specifically 9) it breaks.

http://lumpiahouserestaurant.com/menu/

I already fixed the <thead> problems because IE didnt interpret display:inline-block well. I cant find a similar problem with the <tbody>.

The main goal of the table is to have the <tr> floated left and the <td> to have display block so they display downwards.

Answer 1

Tables are not designed to be written in this vertical way. While it could be a fun experiment to toy with browsers in this way, it sounds like a recipe for a headache in a production site.

If you insist on coding up your table this way (I’m guessing you want to do this because it’s more intuitive to read in the HTML), you can either

1. Make an outer table with 7 columns and 1 row – one for each day. In each column create a table with n rows and 1 column to hold the data for each day. This is assuming that the table rows aren’t supposed to be aligned, as in your example.
2. Do up your table from left to right rather than from top to bottom, then use javascript to transpose the table.