Switch Table Cells

Forum Moderators: not2easy

Message Too Old, No Replies

Switch Table Cells

almo136

3:21 pm on Aug 25, 2015 (gmt 0)

I have the below layout on a page:
[evernote.com...]
These blocks continue like this.

I have used a css table to do this as I found it the easiest way to keep the block with the text in it the same height as the column with the image.

The site is responsive so when viewed on a mobile I would like the image to be 100% width with the text below it at 100% width.

The problem is when I do this both sets of text end up above/below each other instead of image, text, image, text.

Is there an easy way to solve this?

I tried changing the table cells so that the text always appeared before the image in the html and then switching them with floats but it didn't work.

not2easy

4:22 pm on Aug 25, 2015 (gmt 0)

Can you share the css you are using to accomplish what you have now, and we can look for alternative ideas. Are you switching behavior with media queries?

almo136

4:34 pm on Aug 25, 2015 (gmt 0)

Sure. This is the current CSS:

.home-blocks {
display: table;
color: #333;
margin-bottom: 100px;
}

.home-blocks .hbrow {
display: table-row;
}

.home-blocks .hbcell {
display: table-cell;
width: 50%;
background-color: #ebebeb;
vertical-align: middle;
text-align: center;
}

.hbcell .blockcontent {
width: 80%;
margin: 0 auto;
}

.hbcell h2 {
text-transform: uppercase;
}

.hbcell p {
font-size: 20px;
line-height: 30px;
}

Yes, I will be using media queries to change those blocks to be 100% width on mobile.

lucy24

6:32 pm on Aug 25, 2015 (gmt 0)

Based on the link from your first post, the layout toggles:
image1 text1
text2 image2
image3 text3
... back and forth, I assume for visual balance.

And then if the viewport isn't wide enough to put the two pieces side by side, you want it to switch over to
image1
text1
image2
text2
image3
text3

Is that what you mean? The problem is that the order of elements changes: from
image1 text1 text2 image2
to
image1 text1 image2 text2

If Item A comes before Item B in the html, the only practical way to make it display "after" Item B is to set it to float right (assuming ltr script)-- and then only if its width is less than 100%. So you may need to reverse the way the whole thing is coded. Let the HTML go in logical order-- image, text, image, text all the way through-- and then set it up so every other image block is right-floated.

almo136

6:53 pm on Aug 25, 2015 (gmt 0)

Yes, the way you have described it is correct.

I tried changing the html like you mentioned and using floats but it didn't work. Is it possible to float css table cells?

not2easy

7:21 pm on Aug 25, 2015 (gmt 0)

No, that is the problem. When creating css tables using 'display: table' or 'display: table-cell' you can't use floats. You can change it to display: block at smaller widths but the alternating order needs some extra css. One set of classes to cover image first, another set to cover image after text.

Paul_o_b

8:25 pm on Aug 25, 2015 (gmt 0)

Hi,

You could use flexbox for smaller screens (mobile has good support flexbox) and then you can re-order content easily.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
max-width:1200px;
width:100%;
margin:auto;
display:table;
table-layout:fixed;
}
.cell {
display:table-cell;
vertical-align:middle;
background:#f9f9f9;
text-align:center;
}
.tr {
display:table-row;
}
img {
max-width:100%;
height:auto;
}

@media screen and (max-width:600px){
.wrap{display:block}
.tr{display:flex;flex-wrap:wrap}
.cell{flex: 1 100%;margin:0 0 20px}
.even .cell:last-child{order:-1}
}
</style>
</head>

<body>
<div class="wrap">
<div class="tr">
<div class="cell"><img src="http://placehold.it/600x600"></div>
<div class="cell">Some text here</div>
</div>
<div class="tr even">
<div class="cell">Some text here</div>
<div class="cell"><img src="http://placehold.it/600x600"></div>
</div>
<div class="tr">
<div class="cell"><img src="http://placehold.it/600x600"></div>
<div class="cell">Some text here</div>
</div>
<div class="tr even">
<div class="cell">Some text here</div>
<div class="cell"><img src="http://placehold.it/600x600"></div>
</div>
</div>
</body>
</html>

lucy24

8:50 pm on Aug 25, 2015 (gmt 0)

<div class="tr even">
<div class="cell">Some text here</div>
<div class="cell">

Would there be anything wrong with simply calling them tr and td in the html? It would save a lot of bytes over the course of the page, and you can easily use an nth-child operator to style every other row.

almo136

9:27 pm on Aug 25, 2015 (gmt 0)

I think that is exactly what I need. Tested it and it is working so far. Couple of questions...

1. Any ideas why the text blocks seem to be about 4px taller than the images:
[evernote.com...]

2. It only seems to be working in Chrome at the minute. I believe I need to use this for the display:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

What about the Flex and flex-wrap properties? Are there browser specific properties for these as well that I need to use?

Paul_o_b

8:47 am on Aug 26, 2015 (gmt 0)

Hi,

The gap is because the image is placed on the baseline by default and leaves room underneath for descenders just like text. Set the image to display:block and the gap will disappear.

As Lucy said above nth-child rules would save the need for extra classes on the tr and of course the cell divs could be styled as direct children with the child selector combinator.

Regarding prefixes then yes you need them for best support although most modern browsers support the un-prefixed versions now. I just throw them into codepen and use the autoprefixer there.

Here is the revised code:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.wrap {
 max-width: 1200px;
 width: 100%;
 margin: auto;
 display: table;
 table-layout: fixed;
}

.tr > div {
 display: table-cell;
 vertical-align: middle;
 background: #f9f9f9;
 text-align: center;
}

.tr {
 display: table-row;
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}

@media screen and (max-width:600px) {
 .wrap {
 display: block
 }
 .tr {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
   flex-wrap: wrap
 }
 .tr > div {
 display:block; 
 -webkit-box-flex: 1;
 -webkit-flex: 1 100%;
  -ms-flex: 1 100%;
   flex: 1 100%;
 margin: 0 0 20px
 }
 .tr:nth-child(even) > div:last-child {
 -webkit-box-ordinal-group: 0;
 -webkit-order: -1;
  -ms-flex-order: -1;
   order: -1
 }
}
</style>
</head>

<body>
<div class="wrap">
<div class="tr">
<div><img src="http://placehold.it/600x600"></div>
<div>Some text here</div>
</div>
<div class="tr">
<div>Some text here</div>
<div><img src="http://placehold.it/600x600"></div>
</div>
<div class="tr">
<div><img src="http://placehold.it/600x600"></div>
<div>Some text here</div>
</div>
<div class="tr">
<div>Some text here</div>
<div><img src="http://placehold.it/600x600"></div>
</div>
</div>
</body>
</html>

almo136

9:12 am on Aug 26, 2015 (gmt 0)

Works a treat. Thanks,