By the time mobile (smartphone) growth stabilizes, mobile will drive 40%-50%+ of your visitors! This is a tremendous opportunity to build a strong NEW stream of traffic. To maximize that, present a high-quality, highly usable "mobile" version of your site. Optimize for other mobile-specific issues. This forum discusses all that and, more generally, how to maximize this opportunity to grow your e-business income. Oh yes - tablets covered, too.

Moderator: A J from Somewhere Hot

#1377857 by Doug from Emelle
Sat Jul 29, 2017 7:15 pm

Hi there beautiful people! I am happily engaged trying to turn my site into a mobile ready site, and I am finding it fairly straight forward for most things, but I have come up against a table that I don't know what to do with. I've tried several options, and none so far seems to work out very well. The closest was putting the whole table into a container block and shrinking the width, but I did not find the result at all satisfactory.. it looked like I had reduced the width and shoved it into a shoe 10 sizes too small.

The table is located on the following page toward the bottom: [Domain Private]/easy_gardening.html


Very long table. :oops: But for now, I just want to get it converted as is. All things in their time.

With other tables I have, I was able to just drop the code into responsive design blocks, but for this one, each row must "stay in place" to work.

I am willing and able to completely rebuild the table, but am at a loss about how to go about it. I am open to options that are not a "table" if they will adequately present the information.


Here is the code originally used.

Code: Select all<br><table style="width: 525px;" border="1" cellspacing="0" cellpadding="0" align="center">
<thead>
<tr style="background-color: #ffcc99;">
<td class="xl25" style="text-align: center;" width="155" height="17"><span style="font-size: small;"><strong>Common Name</strong></span></td>
<td class="xl25" style="text-align: center;" width="104"><span style="font-size: small;"><strong>Plant Type</strong></span></td>
<td class="xl25" style="text-align: center;" width="384"><span style="font-size: small;"><strong>Maintenance Characteristics</strong></span></td>
</tr>
</thead>
<colgroup><col width="155" /> <col width="104" /> <col width="383" /></colgroup>
<tbody>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Crocosmia</strong></em></td>
<td class="xl24" width="104">Bulb</td>
<td class="xl24" width="384">Dig and make divisions every three to five years.&nbsp; In between?&nbsp; Easy Care!</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="51"><em><strong>Crocus</strong></em></td>
<td class="xl24" width="104">Bulb</td>
<td class="xl24" width="384">Consistent water required during dry spells.&nbsp;&nbsp;&nbsp; Plant leaves must be allowed to die back prior to cutting.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Daffodil</strong></em></td>
<td class="xl22" width="104">Bulb</td>
<td class="xl22" width="384">Water and watch them grow!&nbsp; Leaves must&nbsp;&nbsp; be allowed to die back to nurture bulb.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="51"><em><strong>Grape Hyacinth</strong></em></td>
<td class="xl22" width="104">Bulb</td>
<td class="xl22" width="384">Plant where spreading of bulbs is desired.&nbsp; Do not plant in areas where spreading is&nbsp; not desired.  Nature takes care of the rest!</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Snowdrop</strong></em></td>
<td class="xl24" width="104">Bulb</td>
<td class="xl24" width="384">Does not thrive under other the shadow of other plants.  Otherwise, a trouble free bulb!</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="51"><em><strong>Iris Varieties</strong></em></td>
<td class="xl24" width="104">Bulb/Rhizome</td>
<td class="xl24" width="384">Ensure that rhizome is planted so that it lies just above soil surface.&nbsp;&nbsp;&nbsp; Divide when flowers decrease (every 3-5 years in most situations)</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Parthenocissuss</strong></em></td>
<td class="xl22" width="104">Climbing Vine</td>
<td class="xl22" width="384">Easy vining plant.&nbsp; Use care in&nbsp;siting.&nbsp; This plant can grow very&nbsp;&nbsp; large.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="51"><em><strong>Fatsia Japonica</strong></em></td>
<td class="xl22" width="104">Evergreen Shrub</td>
<td class="xl22" width="384">Must be shaded as direct sun will burn leaves.&nbsp; Among the easiest of plants to grow and maintain where hardy and shaded.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="17"><em><strong>Miscanthus</strong></em></td>
<td class="xl24" width="104">Grass</td>
<td class="xl24" width="384">Little or no maintenance required beyond watering.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Blue Star Creeper</strong></em></td>
<td class="xl24" width="104">Ground cover</td>
<td class="xl24" width="384">Plants creep to about 1 foot circumference.&nbsp;&nbsp;&nbsp; May need occasional trimming along paths or patio edges.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Baby's Tears</strong></em></td>
<td class="xl22" width="104">Groundcover</td>
<td class="xl22" width="384">Yearly to twice yearly edging into desired areas.&nbsp; Then just walk away.&nbsp; Requires moist shade to shine.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="17"><em><strong>Barren Strawberry</strong></em></td>
<td class="xl22" width="104">Groundcover</td>
<td class="xl22" width="384">Little to no maintenance required beyond watering.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="17"><em><strong>Creeping Phlox</strong></em></td>
<td class="xl24" width="104">Groundcover</td>
<td class="xl24" width="384">Will grow just about anywhere if basic needs are met.  Benefit from consitent watering.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="17"><em><strong>Thyme</strong></em></td>
<td class="xl24" width="104">Groundcover</td>
<td class="xl24" width="384">The perfect plant!  Nearly trouble free.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Vinca varieties</strong></em></td>
<td class="xl22" width="104">Groundcover</td>
<td class="xl22" width="384">Rare occurrences of plant blight, root rot, or leaf spot.  Occasional light trimming may be desired.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Cotoneaster</strong></em></td>
<td class="xl22" width="104">Groundcover, Shrub</td>
<td class="xl22" width="384">Occasional&nbsp; light pruning as desired to maintain shape.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>African Daisy</strong></em></td>
<td class="xl24" width="104">Perennial</td>
<td class="xl24" width="384">Tidy growth habit. May self&nbsp;sow.&nbsp; Invasive in some climates.&nbsp; (check your zone!)</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="17"><em><strong>Astilbe</strong></em></td>
<td class="xl24" width="104">Perennial</td>
<td class="xl24" width="384">No mess, no fuss, hardy...this one must be the perfect plant!</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Bleeding&nbsp; Heart</strong></em></td>
<td class="xl22" width="104">Perennial</td>
<td class="xl22" width="384">Plants benefit from occasional light dressing of compost.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Brunnera</strong></em></td>
<td class="xl22" width="104">Perennial</td>
<td class="xl22" width="384"> Occasional light pruning as desired for shape.  Removal of flower stalks may be desired, as they can detract from the striking foliage.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Calla Lily</strong></em></td>
<td class="xl24" width="104">Perennial</td>
<td class="xl24" width="384">Requires consistent watering.&nbsp; Bulbs do not like to be disturbed after planting.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Columbine</strong></em></td>
<td class="xl24" width="104">Perennial</td>
<td class="xl24" width="384">Columbine may reseed under some conditions. Self sowing is easily managed however.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Common Fern</strong></em></td>
<td class="xl22" width="104">Perennial</td>
<td class="xl22" width="384">Trouble free plant. Stay away from bracken fern as it tends to become a nusiance.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="17"><em><strong>Coral Bells</strong></em></td>
<td class="xl22" width="104">Perennial</td>
<td class="xl22" width="384">OK, maybe this is the perfect plant!  Some gardeners prefer to remove delicate flowers after blooming, but this is unecessary as the spent flower is lovely.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Daylily</strong></em></td>
<td class="xl24" width="104">Perennial</td>
<td class="xl24" width="384">Nearly impossible to kill, but well behaved.&nbsp; Cut back after flowering.&nbsp; Deadhead if desired.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Foam Flower</strong></em></td>
<td class="xl24" width="104">Perennial</td>
<td class="xl24" width="384">Do not allow roots to remain wet.&nbsp; Happiest in high humus soils. Very little maintenance.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Hakonechloa&nbsp;&nbsp; macra"Aureola"</strong></em></td>
<td class="xl22" width="104">Perennial</td>
<td class="xl22" width="384">Siting is important for this plant. Does not tolerate dry soil or root competition from trees.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Hardy&nbsp;&nbsp; Geranium (Cranesbill)</strong></em></td>
<td class="xl22" width="104">Perennial</td>
<td class="xl22" width="384">Plant compact varieties in small garden situations. Some varieties may become leggy and require cutting back.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Hosta Varieties</strong></em></td>
<td class="xl24" width="104">Perennial</td>
<td class="xl24" width="384">Slug bait is critical in most garden situations.  Otherwise a truly trouble free plant.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="17"><em><strong>Lady's Mantle</strong></em></td>
<td class="xl24" width="104">Perennial</td>
<td class="xl24" width="384">Little to no maintenance required beyond watering.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Monkshood</strong></em></td>
<td class="xl22" width="104">Perennial</td>
<td class="xl22" width="384">Requires consistent watering.&nbsp; Too much water can cause crown rot.&nbsp; Taller varieties do need&nbsp;&nbsp; staking for best appearance.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Peony</strong></em></td>
<td class="xl22" width="104">Perennial</td>
<td class="xl22" width="384">Elegant Foliage most of the year; dies back in winter, taller varieties may require staking.&nbsp; Extremely long lived.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Phormium</strong></em></td>
<td class="xl24" width="104">Perennial</td>
<td class="xl24" width="384">Occasional removal of single leaves that die back.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Rodgersia pinnata</strong></em></td>
<td class="xl24" width="104">Perennial</td>
<td class="xl24" width="384">Bait for slugs, otherwise nearly trouble free.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="17"><em><strong>Sedum 'Autumn Joy"</strong></em></td>
<td class="xl22" width="104">Perennial</td>
<td class="xl22" width="384">Excellent plant which requires little attention.  Broken leaves will create new plants easily if tamped into ground.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Shrub Rose</strong></em></td>
<td class="xl22" width="104">Perennial</td>
<td class="xl22" width="384">Requires occasional mulching for best health.&nbsp; Prune for shape.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Euonymous</strong></em></td>
<td class="xl24" width="104">Shrub</td>
<td class="xl24" width="384"> Can be invasive in some climates.&nbsp; (check your zone!) Where it is not invasive, one of the most trouble free shrubs available.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="17"><em><strong>Euphorbia</strong></em></td>
<td class="xl24" width="104">Shrub</td>
<td class="xl24" width="384">Little to no maintenance required beyond watering.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="51"><em><strong>Heathers - Calluna varieties</strong></em></td>
<td class="xl22" width="104">Shrub</td>
<td class="xl22" width="384"> Occasional pruning as desired.&nbsp; Consistent&nbsp;&nbsp; watering required especially in first year.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="51"><em><strong>Heathers - Erica varieties</strong></em></td>
<td class="xl22" width="104">Shrub</td>
<td class="xl22" width="384">Occasional&nbsp;&nbsp; pruning as desired.&nbsp; Consistent&nbsp;&nbsp; watering required especially in first year.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Hebe varieties</strong></em></td>
<td class="xl24" width="104">Shrub</td>
<td class="xl24" width="384">Prune as desired for shape.  Can become leggy after flowering.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Huckleberry</strong></em></td>
<td class="xl24" width="104">Shrub</td>
<td class="xl24" width="384">Prune as desired for shape.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="34"><em><strong>Hydrangea</strong></em></td>
<td class="xl22" width="104">Shrub</td>
<td class="xl22" width="384">Benefit from occasional fertilizer.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="17"><em><strong>Japanese Barberry</strong></em></td>
<td class="xl22" width="104">Shrub</td>
<td class="xl22" width="384">Occasional pruning of a stray branch may be required.  Otherwise a shapely and trouble free choice!</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Nandina</strong></em></td>
<td class="xl24" width="104">Shrub</td>
<td class="xl24" width="384">Prune as desired for shape, and to encourage dense branching.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="34"><em><strong>Pittosporum</strong></em></td>
<td class="xl24" width="104">shrub</td>
<td class="xl24" width="384">Aphids can occasionally be a problem, but are easily eradicated.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="51"><em><strong>Rhododendron</strong></em></td>
<td class="xl22" width="104">Shrub</td>
<td class="xl22" width="384">Deadhead as desired to encourage next year blooms, but not required for plant health.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl22" width="155" height="17"><em><strong>Sarcococca (Sweet Box)</strong></em></td>
<td class="xl22" width="104">Shrub</td>
<td class="xl22" width="384">Little or no maintenance required beyond watering.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="17"><em><strong>Artemisia</strong></em></td>
<td class="xl24" width="104">Shrub, Perennial</td>
<td class="xl24" width="384">Some varieties can become leggy after flowering, lightly prune for shape, but do not hard prune this plant.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl24" width="155" height="17"><em><strong>Acer Palmatum varieties</strong></em></td>
<td class="xl24" width="104">Tree</td>
<td class="xl24" width="384">Some varieties occasionally self sow.</td>
</tr>
<tr style="background-color: #ccff99;">
<td class="xl23" width="155" height="35"><em><strong>Evergreen conifers</strong></em></td>
<td class="xl23" width="104">Tree</td>
<td class="xl23" width="384">
<p>Water heavily in first year to establish.</p>
</td>
</tr>
</tbody>
</table>
<br>


Thanks in advance!

Doug Skelton
#1377881 by A J from Somewhere Hot
Sat Jul 29, 2017 10:55 pm
Well, here is one option I used on a troublesome table like yours.

I put the table into a desktop only block. Then I took a screenshot of the table, and made a nice pic out of it. I then put that pic into a mobile only container, and added the gallery function to it, so phone users could click the image to see it large size if they couldn't read the text. Might work for you maybe.
Cheers, AJ
#1377884 by Will from Los Ojos
Sat Jul 29, 2017 11:11 pm
Hi Doug,

What I would probably do is remake the table into 2 columns by combining columns 1 and 2 , so that the 2 bits of data live in the one cell. Just use the (non-responsive) Grid Block in BB2. That is just a regular HTML table, but called a Grid Block.

Image

Like this

Column 1

=====
Ailanthus

Grass
=====

Blue Star Creeper

Ground Cover

======
Baby's Tears

Ground cover

=====


Column 3 then becomes the new column 2. With 2 columns that should fit better on a mobile screen.

Bear in mind the width of a column is determined by the longest piece of data in that column. So column 1 will probably be as wide as the word "Parthenocissuss" :)

Will

You can go to CodeCanyon to find responsive data tables, but it's probably more work than you want to get into.

https://codecanyon.net/item/responsive-tables/8763012
#1377918 by Doug from Emelle
Sun Jul 30, 2017 1:15 pm
Thanks so much folks!

Sorry for the delayed response, we are dealing with modem/router issues at our house... was unable to do anything at all on the computer yesterday afternoon. I went and bought new stuff yesterday evening, so "hopefully" I can get that resolved. Tends to put a crimp in website activity of any sort.

I will try out the two options. It sounds though, like fixed tables as such, unless pretty small, are a thing of the past. I may need to get creative and come up with something new, especially since that particular table is so darn long. What was I thinking. :oops:

Thanks for your input, I don't feel quite so badly if the two of you dealt with the same kind of issue. :wink: I'll report back with whatever my solution ends up being.

As always, I am very grateful for those of you who are so willing to give of your time and energy to help others.

Doug S
#1377942 by Doug from Emelle
Sun Jul 30, 2017 7:05 pm
Thank You AJ and Will! I was able to successfully shrink the table (or grow it, depending upon how you look at it! :shock: ) to where it will work on Mobile phones. Looks a bit strange on the desktop, but it will work for now.

I ended up rebuilding the table in the way that you suggested Will. I think it worked fairly well. At least it is clean.. not lopping off at the right on mobile. I appreciate the suggestion very much. Thanks for getting me though this hump!

Doug S
#1382596 by Timothy from Glen Hope
Fri Sep 29, 2017 3:46 pm

Doug and all, tables are not going away in mobile. The use of <div> tags is the preferred method however tables can be responsive using a bit of styling. I see you are using fixed widths in your table. Fixed widths are the reason the table is not responsive. IF you switched the width factor to a percentile for table and column the table becomes responsive.

Like this

Code: Select all<table border="1" width="100%" cols="3" style="max-width:525px" align="center">
   <tr>
      <td width="33%">&nbsp;</td>
      <td width="33%">&nbsp;</td>
      <td width="33%">&nbsp;</td>
   </tr>
   <tr>
      <td width="33%">&nbsp;</td>
      <td width="33%">&nbsp;</td>
      <td width="33%">&nbsp;</td>
   </tr>
   <tr>
      <td width="33%">&nbsp;</td>
      <td width="33%">&nbsp;</td>
      <td width="33%">&nbsp;</td>
   </tr>
</table>


This will show a 3x3 table that is responsive mobile or desktop. Notice I included a 'style' tag in the <table> tag. With css you should be able to make it look anyway you like.

I also used the 'max-width' rule to contain the maximum size. You can use different combinations of % and max-width/min-width to contain tables and make them mobile responsive.

Or you could use BB2.

Hope this helps

Tim
Similar Topics Statistics Last post
FAQs - Mobilize It!, Mobile, & Tablets
by Debs from barkinista.com Thu Feb 23, 2017 3:54 pm
2 Replies
677 Views
by Debs from barkinista.com
Thu Feb 23, 2017 4:00 pm
Google says my URL is not mobile friendly - what is the fix?
by Bernard from practical-retirement-planning.com Sat Dec 24, 2016 11:43 pm
3 Replies
684 Views
by Bernard from practical-retirement-planning.com
Thu Dec 29, 2016 3:15 pm
Is react native a good option for mobile app?
by Stephen from Monroeville Wed Jul 26, 2017 1:13 pm
1 Replies
199 Views
by Mary from Mico
Wed Jul 26, 2017 5:12 pm
Mobile speed
by sayaphone from Wikieup Tue Jan 10, 2017 12:08 pm
4 Replies
1109 Views
by Will from Los Ojos
Sat Jan 21, 2017 2:34 pm
Report from Google mobile - what does it mean
by Kate from Conception Junction Wed Nov 23, 2016 3:59 pm
5 Replies
1185 Views
by Debs from barkinista.com
Wed Feb 22, 2017 6:58 pm

Users browsing this forum: No registered users and 1 guest