Jump to content

Responsive CSS Table Code

Recommended Posts

Hello,

I have this table code that's responsive on another (non squarespace) site:

<table class="table_three_cols" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td>
</td>
<td>
</tbody>
</table>

But on SquareSpace the tables aren't responsive and the graphics get squashed... is there any way I can simply change the CSS so as the screen shrinks the table columns drop below each other?

Here's the page:

https://www.library.co.uk/new-page-2

Dan

 

Screenshot 2019-11-04 at 18.34.34.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Page with a responsive table: https://learnclub.co.uk/articles/table-test

The Table Code: 

<table class="table_three_cols" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td>
<p align="center"><span style="font-size: xx-large;"><b>people</b></span></p>
<p align="center"><img src="/custom/Adjectives/astronaut-1.png" alt="astronaut" caption="false" width="280" height="294" /></p>
<p>&nbsp;</p>
<p align="center"><span style="font-size: xx-large;"><span style="color: #339900;"><b>astronaut</b></span></span></p>
</td>
<td>
<p align="center"><span style="font-size: xx-large;"><b>places</b></span></p>
<p align="center"><img src="/custom/Adjectives/moon-1.png" alt="moon" caption="false" width="278" height="292" /></p>
<p>&nbsp;</p>
<p align="center"><span style="font-size: xx-large;"><span style="color: #339900;"><b>planet</b></span></span></p>
</td>
<td>
<p align="center"><span style="font-size: xx-large;">and <b>things</b></span></p>
<p align="center"><img src="/custom/Adjectives/rocket-1.png" alt="rocket" caption="false" width="280" height="293" /></p>
<p>&nbsp;</p>
<p align="center"><span style="font-size: xx-large;"><span style="color: #339900;"><b>rocket</b></span></span></p>
</td>
</tr>
</tbody>
</table>

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.