asked on

Breaking td to next row using responsive design

I've got a table like
<table><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr></table>

that of course displays like:
A B C D

Now I'd like, in certain circumstances (responsive) make this display like
A B
C D

Thus, I'd like a "line break" between <td> B and C.
I'd like to handle this by setting a css class on cell C (or B) but not set any particular classes on the other cells.

Is there any smart css to use that forces a "line break" between two <td> cells?

Thanks
/Stefan

Alexandre Simões

Mate... this is wrong from the core :)

Making layouts with tables is already not good. Making a responsive layout with tables becomes insane :)

Rework your layout using div's.
Have a look at some responsive layouts around and see how they do it.

Have a good look at Bootstrap for instance.
This example illustrates perfectly the way you should be doing it: http://getbootstrap.com/examples/offcanvas/

Stefan Lennerbrant

ASKER

Sure, all this is no problem at all doing it that way.
However, now there is an existing table-based layout and I'd like to modify it as little as possible.

Alexandre Simões

Ok... if you insist :)

The best way I see here without too much impact is to have 2 tables side-by-side instead of 1 but the implementation depends on how your page looks like.

Can you create a sample code with your current table layout?
A mean width wise... do you have a fixed width or you're using width 100% and want to break if the page width is lower than x?

COBOLdinosaur

However, now there is an existing table-based layout and I'd like to modify it as little as possible.

Then you will never have anything but a hacked version of a 20th century layout.

Without a link or at least a sample of the content, I don't know if you are trying to do layout management with the table or if you need options for tabular data presentation.

If you are just looking for a quick fix with the least amount of work, then I am not the one to help you. If you want to do it right then post a link and we can explore the options; but you will need to do some work if you want good presentation across multiple resolutions.

Cd&

ASKER CERTIFIED SOLUTION

Stefan Lennerbrant

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Stefan Lennerbrant

ASKER

I've requested that this question be closed as follows:

Accepted answer: 0 points for stefanlennerbrant's comment #a39721531

for the following reason:

This seems to solve the problem quite ok

Stefan Lennerbrant

ASKER

Well, I originally stated that I wanted to "not set any particular classes on the other cells"
My solution doesn't really fulfill this, but as I only need to set class on two td's, not needing to tweek the td's containing actuall text/data, this is good enough for me.

David S.

It's best to avoid using nested tables.

I would recommend looking into whether inline-blocks would suit your requirements. It would be great to be able to use Flexbox for this, but Firefox only supports single-line Flexbox currently.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

table {
	margin: 1em auto;
	background: #eee;
}
td {
	width: 140px;
}

table.responsive2Col {
	max-width: 100%;
}

@media screen and (max-width:640px) {
	table.responsive2Col,
	table.responsive2Col tbody,
	table.responsive2Col tr {
		display: block;
		w\ord-spacing: -.43em;
	}
	:root table.responsive2Col {
		letter-spacing: -.31em;
	}
	table.responsive2Col th,
	table.responsive2Col td {
		display: inline-block;
		vertical-align: top;
		width: 50%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		word-spacing: normal;
		letter-spacing: normal;
	}
}

</style>
</head>
<body>

<table class="responsive2Col"><tr>
	<td>A</td>
	<td>B</td>
	<td>C</td>
	<td>D</td>
</tr></table>

</body>
</html>

Open in new window

Stefan Lennerbrant

ASKER

That look very interesting, Kravimir, but I don't understand the magic with word-spacing

The tr word-spacing seems to be the thing that avoids breaking on all cells, instead breaking only between cell B and C.
Is this a hack or is there a "good" explanation? (I tested only with Chrome now, and there it all works quite OK)

SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Stefan Lennerbrant

ASKER

Interesting solution.
My own code does solve the actual problem, though :-)