Responsive (big) tables

Content
1

Enjoyed today’s Vin65 blog post:

https://www.vin65.com/blog/5-Examples-of-Great-Holiday-Winery-Marketing

Regarding item 4, the holiday shipping table. This table is not responsive, unlike the rest of the page. (Link: http://www.vinumcellars.com/Our-Wines/Wine-Shop/Current-Releases)

I realize that a five column responsive table is probably more than the technology can manage, but it still needs to look like something on the small screen. How are people solving this?

1 Like
2

Depending on how complex your matrix is, you can go fluid.

https://www.tankgaragewinery.com/Information/Shipping

You could also do a media query that displays a fluid table at larger widths and then stacked tables separated by either holiday or region at smaller widths.

1 Like
3

To make a shipping table like the one shown in the example, you just need to make sure that your table is based off of percentages as opposed to a set width.

To add this table to your site, you can copy and paste the code below into the Content Editor. :slight_smile: Just go to Content Editor > select your page > click the Source button and paste the code below.

<table border="1" cellpadding="7" cellspacing="1" style="width:100%;border-color: #dedede;">
<thead>
	<tr>
		<th scope="col" style="text-align: left; background:transparent;">Region</th>
		<th scope="col" style="text-align: left; background:transparent;">Time In Transit</th>
		<th scope="col" style="text-align: left; background:transparent;">Christmas</th>
		<th scope="col" style="text-align: left; background:transparent;">New Years</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>California</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>North West &amp; Mountain West</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>Mountain &amp; Mid South</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>Mid West &amp; Mid South</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>South East &amp; East Coast</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</tbody>

If you’d prefer to make your own table, you can follow the along with these instructions: http://recordit.co/jFifDRJUQU

If you want to create responsive columns with a lot of data, you can use our responsive column templates: http://recordit.co/jMDtay4vdn

4 Likes