[Solved] Colspan problem

[sensationikke]

Hi, after many days of searching I finally decided to ask your help

What i wanted to achieve

In my JSfiddle i have 2 divs in a container. Each div contains a floated box(yellow) and a not floated table(green). I wanted this table to have 2 rows with 3 columns, of which the the first one is about the double width of the others. The cell width is given in %. Therefor i decided to add a colspan="2" to this first column. I noticed this did not do well unless I had a row with 4 seperate cells (no colspan).So added <tr><td></td><td></td><td></td><td></td></tr>. A row of emtpy cells.

The problem

The red titles are not horizontally aligned due to the tables width. I want to have all the tables to have the same size, and thus have the red titles horizontally alligned (still being different tables!). The tables should be next to the floated div.

Thing I noticed

While trying to solve my problem I noticed a few things, and which might bring a solution:

• Giving the table a fixed width solves the problem: http://jsfiddle.net/yK34s/6/. Yet I wish to have it being the size of the screen, so only a max-width can be added. But this does not solve anything.
• Deleting the row of empty cells makes the green area 100% of width. But this causes the problem that the first column is not bigger:http://jsfiddle.net/yK34s/7/
• Having the last cell exceed its width makes the whole thing full width: http://jsfiddle.net/yK34s/8/
• Someone also noted that adding a double width to the first column and playing around with the padding gave the desired effect full larger screens. But resizing this gave problems and also prevented the table from jumping under the yellow div when it was too big.http://jsfiddle.net/peteng/yK34s/12/

So I want the look of the last link, this without a fixed width and preferable not the padding solution . Having a solution without the row of empty cells would be lovely. Hopefully one of you can catch my faults and fix them!

[TheDutchCoder]

Hi fellow Dutchman ;-)

Does this help?
http://jsfiddle.net/ydWPq/

What I did was remove the colspans, set all the table cells to be 25% width, but make the first table cell 50% width (you can do that with td:first-child {}).

I also made the table have a 100% width (this prevents it from floating next to the yellow box) and (just to be sure), I’ve set the table-layout to ‘fixed’, so the content doesn’t push cells.

Is this what you were looking for?

If not, maybe you can post an image of how you would want it to look and then I can alter the code for you ;-)

[sensationikke]

TheDutchCoder: Check this link(don’t mind the header area):http://sensationikke.byethost7.com/index.php?lang=nl&p=catalogue&cat=1

Note how the green parts behave when resizing. Also note that the bottom and second table are not the same size when at maximum width as the other 2.

What I still experience as weird is that adding more numbers to the last column, make the whole thing fit perfectly.

[Paulie_D]

I think you really need more columns to make all the relevant text sections align properly.

It looks to me as though you should have 6 columns at least.

That’s not to say that you couldn’t mange with just 3 but you would have to add more span elements inside them and perhaps align or float those.

Frankly, though 6 columns would make more sense to me.

[sensationikke]

In case of 6 colums, there would be a blank space between the red and the black text. Right?

[TheDutchCoder]

I agree with @Paulie_D about using more cells/columns, but if you implement my changes, things will at least line up.

E.g.:

.information_table {
  table-layout: fixed;
}

.information_table td:first-child {
  width: 50%;
}

And remove the extra table row in your HTML, as well as the colspans.

[Paulie_D]

IMO you shouldn’t use tables for this.

This is tabular data…it’s precisely why he should be using a table.

[TheDutchCoder]

100% agree with that. Tabular data goes in tables ;-)

You could, however, opt for a differently structured table, that’s fine (e.g. use <th></th> for the headings).

[sensationikke]

Thanks for all the responses!

I have created a more correct jsfiddle:http://jsfiddle.net/kzM6a/
Also check the way it behaves on resize
Yet here i noticed that even the first table is not 100% of the available space next to the image, while on the previous posted link it does. (probably due to a few different font/screen sizes).
Edit:
(codepen version works better:http://codepen.io/anon/pen/Kmdca)

Here i have added TheDutchCoder css, but it does not seem to change anything:http://jsfiddle.net/kzM6a/1/

Maby one of you can show how you would solve it with more columns?

EDIT:

@Soronbe: calc would be a solution! Yet browser support could be better

@MattDiMu: I had though of using divs as a solution, as this would make altering the size easier. Check my fiddle for what I want to achieve (but then using all the available space next to the image div, until it gets pushed under)

[Paulie_D]

It’s still tabular data just not laid out in a traditional table…IMO.

It could be argued either way to be honest, but it looks like tabular data to me..so I’d opt for a table…at first. :)

[TheDutchCoder]

Ah I get it, well I would suggest not floating .product_float then, because the only way to get a table to take up the remaining space is with width: 100%;, but that will push the table under the floating element.

[sensationikke]

@TheDutchCoder: I do not see another way to make the title wrap around the floated parts in case it becomes too big.

I am trying to find a solution by using divs: http://codepen.io/anon/pen/tDhIG?editors=110

I am still stuck with a few things:
– Text-align so that the red parts are at the same height (check when resizing).
– Having both the rows jump under image div instead of one (when resizing)
– Having text make full use of the available space. (floats?)

[TheDutchCoder]

That’s a decent solution, just make sure the images are a fixed dimension, otherwise it will break the layout ;-)

An easy way to do that:

.product_float img {
  width: 90px;
  height: 90px;
}

[sensationikke]

@Soronbe: I know, yet using different elements might allow a workaround. The only thing I would have loved (and which makes the solution so hard) is that I hoped to have 1) the title wrap around the image div in case it was to large and 2) have the table jump under the image div when screen became small. Yours is a solution, yet i hope not to lose my above points.

I would also accept a solution with the div-example where on small sizes the whole information box jumps under the image div (resize and check the bottom one)

[MDMueller]

@Paulie_D I know what you mean, I was looking at it twice as well until I realized that from a semantic / accessibility point of view, there is no reason at all to use a table in this case.

There isn’t the slightest connection between rows and columns. Software like screen readers would unsuccessfully try to find a caption or table headings. In best case the screen reader assumes it’s just a bad table-layout and ignores the semantics. In the other cases (which is quite likely), wrong information is read out. So from an accessibility point of view, using a table is not arguable – it simply doesn’t fit here…

[Author]

Posts