Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Responsive table with ONE column

Featured Lock Resolved Issue
Hi!

I need help to make a table responsible at the frontpage.

Got this code.

<div style="overflow-x: auto;">
<table style="height: 100%; width: 100%;" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td style="width: 50%;">CONTENT</td>
<td style="width: 50%;" valign="top">CONTENT</td>
</tr>
<tr>
<td style="width: 50%;" valign="top">CONTENT</td>
<td style="width: 50%;">CONTENT</td>
</tr>
</tbody>
</table>
</div>


It makes the table responsive. But I want to have ONE column not two.

Now it looks like this in a cell phone.
A B
C D


I want:
A
B
C
D


Would be very happy for some help!:)

Kind regards
Ola

3 Answers

Hi,
I would like to suggest you to use our 'table' addon available in sp page builder.
It would be better manageable then i think.
Anyways, if you want to know regarding your current question, then
Please keep each <td> with separate <tr>
Something like this:

<tr>
<td>CONTENT</td>
</tr>
<tr>
<td>CONTENT</td>
</tr>
<tr>
<td>CONTENT</td>
</tr>
<tr>
<td>CONTENT</td>
</tr>


Best Regards

Ola

3 days ago #Permalink
Hi Rashida!

I don't use Pagebuilder on that site

I found this code snippet that works (I don't need a table)

Row 1 (A+B)
<div class="container">
<div class="row">
<div class="col-sm-6">CONTENT</div>
<div class="col-sm-6">CONTENT</div>
</div>
</div>


Row 2 (C+D)
<div class="container">
<div class="row">
<div class="col-sm-6">CONTENT</div>
<div class="col-sm-6">CONTENT</div>
</div>
</div>


On desktop the output is correct:
AB
CD


But on mobile the output is
AB
DC


Any idea of why the second row change order? You can check yourself at http://www.frmclinicssweden.com

I know this is more of a CSS-issue than a template issue...

Kind regards
Ola
Hi,
Initially, you were asking about the table, that's why I thought regarding this.

Anyways, I found out your site good with the ordering issues too.

Regards


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 124
Toufiq

Toufiq

Total Accepted Answers: 68
Sifat

Sifat

Total Accepted Answers: 61
Mehtaz Afsana

Mehtaz Afsana

Total Accepted Answers: 13
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 11

118

Templates

302575

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us