1

I think this is best explained using an image. Image

Image on left, with no col span. Image on right with colspan.

To explain, each green cell is made up of 12 cells representing an hour. This allows me to sync the cells in the correct places to the nearest 5 mins.

using colspan="12", I can reduce the number of cells, by each hour, just creating one cell of span 12. rather than 12. (where applicable).

However, due to this one cell bordering against 12 cells, it is setting its touching border to equal the same colour as one of the touching cells. Despite only half are black, and the rest are green. Is it possible to set the border half and half? or is this a HTML limitation?

EDIT:

Ive found that (In google chrome at least), setting the borders to be the same width has strange effects.The bigger border seems to dominate. I.e. I can reverse the effect by making green wider than black, and instead it makes the whole line green... Setting to 2px, makes them randomly dominate each other. See http://jsfiddle.net/7Harq/7/ and http://jsfiddle.net/7Harq/9/

Edit 2:

Seems to only occur in Chrome (FF works fine).

So, does having extra cells (i.e. 12 cells instead of 1 cell with colspan 12) have a detrimental effect? It was at one point really slow on the Iphone/Ipad which I put down to the number of cells.

IAmGroot
  • 13,760
  • 18
  • 84
  • 154
  • 1
    Can you show us your html/css code ( just create a jsfiddle.net )? – Radu Maris Jan 27 '12 at 15:12
  • http://jsfiddle.net/7Harq/7/ Much better one, with increase readability, and both scenarios – IAmGroot Jan 27 '12 at 15:43
  • Can't reproduce this in Firefox. I've seen this bug earlier, in Chrome. – Rob W Jan 27 '12 at 15:55
  • @RobW Yep, Seems to happen in Chrome but not Firefox. :/ – IAmGroot Jan 27 '12 at 16:05
  • @Doomsknight See this related question http://stackoverflow.com/q/7725110/938089. – Rob W Jan 27 '12 at 16:08
  • @Doomsknight the slowness due to the number of cells might be fixable using `table-layout: fixed;` http://www.w3.org/TR/CSS2/tables.html#width-layout ... this is good to use anyway, when the cells have a fixed size. – ANeves Jan 27 '12 at 16:22
  • `border-collapse: separate;` Is half way there, in that it brings its own cell borders to. But its removing all the borders. which make up the timetable. – IAmGroot Jan 27 '12 at 16:22

1 Answers1

1

This is a browser specific bug.

Each browser has it's own bugs when taking into account table borders (Css or real tables), the only real way of doing this the way you want is to use a DIV and float and space them dynamically or preset using CSS as it is the only true way of getting a cross browser view.

Sorry tables are just too buggy and browser specific to be used for layout.

HAWood
  • 158
  • 7