Hello, I’m having trouble achieving a table like fluid CSS layout, what I need to achieve is to imitate this table layout
<table>
<tr><td>Some text of varied length 1A</td><td>Some text of varied length 1B</td></tr>
<tr><td>Some text of varied length 2A</td><td>Some text of varied length 2B</td></tr>
<tr><td>Some text of varied length 3A</td><td>Some text of varied length 3B</td></tr>
</table>
using this HTML
<div class="multicol">
<div class="colA">
<p>Some text of varied length 1A</p>
<p>Some text of varied length 2A</p>
<p>Some text of varied length 3A</p>
</div>
<div class="colB">
<p>Some text of varied length 1B</p>
<p>Some text of varied length 2B</p>
<p>Some text of varied length 3B</p>
</div>
</div>
and any CSS, even if it’s CSS3, including crazy hacking CSS if necessary, but no javascript or CSS expressions.
I’ve been huffing and puffing all day now and am wondering if any of your folks are willing to at least tell me if it’s possible to achieve this or not.
Interesting challenge.
You said fluid layout. By nature, tables are great fluid containers.
Tables are constructed by row, then by column (columns are inside rows) just like your table example shows.
However, the css markup is arranged by column, then by row (rows are inside columns). Different animals.
The css markup will not work like a table with 3 rows and 2 columns because the “columns” are not paired in rows.
The difference is obvious when the table code is rewritten as shown below.
I don’t think the solution you are seeking is possible. But I’m just a novice
Table code rearranged:
<table>
<tr>
<td>Some text of varied length 1A</td>
<td>Some text of varied length 1B</td>
</tr>
<tr>
<td>Some text of varied length 2A</td>
<td>Some text of varied length 2B</td>
</tr>
<tr>
<td>Some text of varied length 3A</td>
<td>Some text of varied length 3B</td>
</tr>
</table>
Same css code:
<div class="multicol">
<div class="colA">
<p>Some text of varied length 1A</p>
<p>Some text of varied length 2A</p>
<p>Some text of varied length 3A</p>
</div>
<div class="colB">
<p>Some text of varied length 1B</p>
<p>Some text of varied length 2B</p>
<p>Some text of varied length 3B</p>
</div>
</div>
Thank you for the reply ralph!
Yeah, the p’s need to be vertically lined up like they would be for a table, for example look at this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table</title>
<style media="all">
.multicol {display:table;width:300px}
.colA, .colB {display:table-cell;}
p {
border:solid #000 1px;
}
</style>
</head>
<body>
<div class="multicol">
<div class="colA">
<p>Some text of varied length 1A</p>
<p>Some text of varied length 2A</p>
<p>Some text of varied length 3A</p>
</div>
<div class="colB">
<p>Some text of varied length 1B</p>
<p>Some text of varied length 2B
Some text of varied length
Some text of varied length
Some text of varied length
Some text of varied length
Some text of varied length</p>
<p>Some text of varied length 3B</p>
</div>
</div>
</body>
</html>
so that it looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table</title>
<style media="all">
table {
width:300px;
}
table td {
border:solid #000 1px;
}
</style>
</head>
<body>
<table>
<tr><td>Some text of varied length 1A</td><td>Some text of varied length 1B</td></tr>
<tr><td>Some text of varied length 2A</td><td>Some text of varied length 2B
Some text of varied length
Some text of varied length
Some text of varied length
Some text of varied length
Some text of varied length</td></tr>
<tr><td>Some text of varied length 3A</td><td>Some text of varied length 3B</td></tr>
</table>
</body>
</html>
@ronpat thank you, it is interesting and difficult to accomplish, if it is possible. @ralph I sent a message to Paul, lets see if he has the time to help out.
Ronpat hit the nail on the head and you’d need to use the same html structure as the table because the p elements in your cell bear no relationship to the p elements in the other cell unless they are paired in a table-row structure. If you can’t change the html then I don’t think it can be done.
You can equally distribute the elements in each column but that’s not the same as them aligning with each other.
e.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table</title>
<style media="all">
.multicol {
display:table;
width:300px
}
.colA, .colB {
display:table-cell;
vertical-align:middle;
padding: 0 5px
}
p {
border:solid #000 1px;
margin:3em 0;
}
</style>
</head>
<body>
<div class="multicol">
<div class="colA">
<p>Some text of varied length 1A</p>
<p>Some text of varied length 2A</p>
<p>Some text of varied length 3A</p>
</div>
<div class="colB">
<p>Some text of varied length 1B</p>
<p>Some text of varied length 2B
Some text of varied length
Some text of varied length
Some text of varied length
Some text of varied length
Some text of varied length</p>
<p>Some text of varied length 3B</p>
</div>
</div>
</body>
</html>
That only works because the content just happens to almost match.
@Paul
thanks a lot for replying, I figured it was impossible. Although now that “impossible” is mentioned I begin to get ideas, for example I wonder if it’s possible to achieve this without changing the html using the experimental flex-box model, what do you think?
I haven’t played around with flexbox (because the spec keeps changing) but it looks like it can do some clever things. I’d still hazard a guess that you would need to change the html around though to create a relationship between those elements.
