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.
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
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.
Do up your table from left to right rather than from top to bottom, then use javascript to transpose the table.
Related
I have a rather complex table with several colpsan and rowspan that is built dynamically, and I wish to lock headers (and if possible the first rows on the left also) and scroll table content (both vertically and horizontally).
This table has lots of lines and columns (3 to 4 hundred lines, and columns depend on the time frame my user chooses to see).
This table represents an overview of the downprices on products along a timeline. Each product may have one or more discount types.
My table looks like this (sorry for the blurs, but the info in it is kind of confidential):
In summary, the first three rows are headers and the first three cols are product information (those are the ones I would like to lock!).
Each product discount is put into a TD starting on the col this discount starts with a COLSPAN that allows it to go to the col the discount ends.
So, as you can imagine, when the number of product shown grows, users don't know anymore to which date each column corresponds, and if he chooses a date span that goes much further (and the idea is to go on a date span over 1 year) they won't know which product they are looking at (I've turned around this by adding a title to each <tr> with the product info, so any solution to lock headers will be great enough!)
I've tried several solutions to lock header, but none of them worked since due to the colspans of the td on table body, my tbody and theader don't align.
Anyone knows how I can do such a thing? We use mootools here...
A collegue managed to fix it using http://blog.jaimon.co.uk/datascroller/fxHeader_0.6.html
Please see my awesome graphic below which is neither too scale or complete. BUT, I wanted to show the structure I'm going for instead of describing it.
I am creating a space rental system wherein a calendar, structured similarly to the below image, both shows the "taken" spots and also allows a user to click an "open" slot to reserve it themselves. I don't need help with the functionality though, just the layout.
Since this is tabular data at it's finest, with headers and everything, I was able to easily create the desired layout that way. However, tables render from left to right, so in the example below, it renders SPACE 1 9:00am, SPACE 2 9:00am, SPACE 3 9:00am, etc. I need it to actually render SPACE 1 9:00am, SPACE 1 10:00am, etc.
The reason is that in order to make each reservation into a "block" represented by the blue squares below, I need to be able to loop through the columns vertically and not through the rows horizontally.
I also want the columns to be a consistent width and be flexible if more spaces are added or if one/some are removed down the road.
I've been playing with flexbox, which I've barely used before, and I'm having no luck at all. I'm not even sure that's the right direction.
My question would be either 1) is there a way to get a standard table to load the way I want or 2) how can I do this without tables?
Maybe bootstrap's grid system will fit your needs. http://getbootstrap.com/css/
You can create a grid like structure by adding columns, up to 12 in a row, and locking those into rows.
I've got a bit of a challenge with an HTML table that we need to have raised columns. If you look at the attached image you'll see what I mean.
The purpose of these raised columns is to draw the user's attention to them.
The problem is:
To get the effect of the column raising above the other columns you
need some kind of element/height/margin to appear outside the
boundary of the table, which doesn't seem to work
Same goes for the bottom
To have the drop shadow appear correctly, it needs to be applied to all the cells in a column.
We did get this to work by splitting it up into multiple tables then applying the styles to the table that should be the raised column. The image I've attached is actually a live table working like this.
But, you loose all other needed features of tables...
Row heights don't match if the text wraps in table 1 but not in
table 2.
To deal with the row height issue we applied a fixed height to each table's rows, but then you have to force text to not wrap. If you then get text that's longer than the width you run into trouble.
Does anyone know how this can be achieved without splitting the tables?
Thanks,
jacques
Try having an extra row for the table above the header row (you may have to stop using any th tags) to give you the overbar at the top. Similarly for the bottom, an extra highlighting row.
Although you have to compromise the table a little to do that, it is better in my book than separating into 2 tables, as that defeats all the purposes of the table tag; to show a table, and have that table easily declared.
The effects inside the table are probably best done with jquery, unless the choice of highlighted columns is entirely static, in which case consider rendering a static html version by generating the html appropriately.
It is nice in word processors to create short-term column layouts with documents by using tab key with the defined anchors across the top instead of using tables because you can run overlaps like this.
L R
column a row 1 column a row two
this is the first column! on the right
This allows for overlap, or naturally spanning columns without the need for so much structure. Great when you don't need borders.
Can this layout be done in HTML? I know a tabbed layout can be accomplished on a webpage, what I don't know is if you can set the column locations like you can in StarOffice/LibreOffice/OpenOffice Text or in Microsoft Word.
Using div tags with the float: left and float: right styles, you can achieve this type of structure.
I'm working on constructing a table using only divs. I began creating the table using percentages to set column widths, but would prefer to just use table-cell and not have to worry about things that way. Only problem is I'm not guaranteed to have the same number of elements in every row.
http://jsfiddle.net/JWvLX/
This example shows what is currently happening in the top two rows, and what I want to happen if a cell is removed/not present in the bottom two rows.
What exactly do I need to do to accomplish this? Is this possible using only divs for tables or will I be forced to use actual tables to get the desired effect.
There's no equivalent for colspan/rowspan in CSS tables, but this Sitepoint post has some trickery you might be able to use.