Stop Table Wrap Around on Mobile?

[rajjawa]

I have a table that's esentially an actor resume, so three columns in a table. It looks as it should on Desktop but in Mobile the three columns basically turn into a single column for the "mobile expereince." Is there a way to prevent the table from wrapping itself for mobile? 

[PaulMathews]

@rajjawa If you wish to display tabular content within an actual table, you should not use columns. While Weebly columns are coded as tables (which isn't actually a good idea but that's for another topic), they don't behave like proper html tables but rather mimick a nominally responsive grid layout (which is the intent).

You'll need to use an actual table to house your tabular resume content. Try this free Weebly-authored app from the app store:

https://www.weebly.com/app-center/simple-table?ref=ac-collection

Keep in mind, that true tables are not responsive and so there's no intelligent reorganization of content for mobile. They can be coded so that they don't simply squash the column widths down to fit the screen (the worst table behavior) but rather retain each column's minimum width and thus require swiping to the right to see table columns on smaller screens. I haven't used the Weebly table app so I can't say how it is coded.

If you wanted to take a crack at brewing your own (nominally responsive) table in html, check out this tutorial:

https://www.w3schools.com/howto/howto_css_table_responsive.asp

[rajjawa]

Thanks very much for the quick and detailed help, that Weebly applet is gonna work just fine and keeps it simple.

It's not aestetically perfect but it gets the job done better than what I had.

[PaulMathews]

@rajjawa Tables are notoriously tedious to create, edit, and style for web pages. If you'd like a solution where you simply enter your table column elements (show title, role, production company/companies) into a spreadsheet (e.g., Google Sheets, Excel) and have that automagically generate the table row html, hit me up via direct message and I'll send it to you.

For now, here's some table styling and html code that you can use to replace your filmography tables (the table html was generated from a spreadsheet that I knocked together that creates the table html code strings from sheet data):

Filmography Table Style Code (CSS)

In the Site Editor, click Settings then click SEO in the left-hand sidebar. Scroll down to the "Header Code" input box and copy and paste into it the table styling code below:

<style>

/* Custom table classes to style filmography tables */

.resume-wrapper {
overflow-x:auto;
min-width:600px;
}

.resume {
border: none;
border-collapse: collapse;
width:100%;
}

.resume tr {
vertical-align:top;
}

.resume th, .resume td {
text-align:left;
border-bottom: 1px solid #cfcfcf;
padding:20px 30px;
}

.resume th:first-child, .resume td:first-child { 
width: 33%;
}

</style>

Click the green "Save" button in the lower right corner of the page and then click the "x" in the upper-left corner to return to the Site Editor. Go to your Resume page.

Filmography Table HTML

Currently, your filmography tables are directly-entered columnar text for the tabular fields "show title", "role", "production company/companies." You'll replace these with the following actual table code that holds your filmography row data. Below each filmography title, e.g., "TV/New Media", drag and drop a Code Element (it's the Build element named "Embed Code </>"). Within this element, paste in the code blocks shown below for each filmography category on your page. This will make each filmography listing a responsive table with a header row containing the field titles ("show title", "role", "production company"). The table styling code adds a pale grey row divider to make it easier to follow row items. If you don't want the column titles, remove the code under the "Table Header Row" comment. For phone-sized screens, the table will fix its width and require swiping to the right to read the row content (this prevents the columns from simply squashing themselves ever smaller and causing ugly word wrapping).

TV/New Media

Place the following code under the TV/New Media heading within an Embed Code Element:

<div class="resume-wrapper">

<table class="resume">

<!-- Table Header Row -->
<tr>
<th>Show</th>
<th>Role</th>
<th>Production Company</th>
</tr>

<!-- Filmography Rows -->
<tr><td>Threads "Deep Web"</td><td>Guest Star</td><td>​go90 / New Form</td></tr>
<tr><td>​Deep Undercover "Operation Chokehold"</td><td>​Guest Star</td><td>Netflix / Bellum Entertainment</td></tr>
<tr><td>​Unfortunate World "Mondays" & "Performance Anxiety"</td><td>Guest Star</td><td>Play Productions</td></tr>
<tr><td>My Crazy Ex "Social Distortion</td><td>Co-Star</td><td>​Lifetime / Painless TV</td></tr>
<tr><td>Speedway Dreams "Training"</td><td>Guest Star</td><td>Blake Byrum</td></tr>
<tr><td>​Geek Out "Pilot"</td><td>Series Regular</td><td>Chaotic Films</td></tr>
<tr><td>​A Good Life "Pilot"</td><td>Series Regular</td><td>​Stampfli</td></tr>
<tr><td>The Shy Guy</td><td>Series Regular</td><td>Jawa Films</td></tr>
<tr><td>​The Late Night Experiment with Motown Maurice</td><td>Series Regular</td><td>​Motown Maurice Productions</td></tr>

</div>

Film

Place the following code under the Film heading within an Embed Code Element:

<div class="resume-wrapper">

<table class="resume">

<!-- Table Header Row -->

<tr>
<th>Show</th>
<th>Role</th>
<th>Production Company</th>
</tr>

<!-- Filmography Rows -->

<tr><td>Free Guy</td><td>Day Player</td><td>​20th Century Fox / Shawn Levy</td></tr>
<tr><td>Verbatim</td><td>​Supporting</td><td>​Jake Quinn</td></tr>
<tr><td>Sexy Jelly</td><td>​Supporting</td><td>Edward Allerton​</td></tr>
<tr><td>Senorita Saree</td><td>Lead</td><td>Hey Homie! Productions</td></tr>
<tr><td>Sarah's Sister</td><td>Lead</td><td>Space Ranch</td></tr>
<tr><td>True Story</td><td>Supporting</td><td>Victoria Hill</td></tr>
<tr><td>P.A.</td><td>Lead</td><td>Garaj Pictures​</td></tr>
<tr><td>Old Glory</td><td>​Lead</td><td>Landon Koenig-Muenster</td></tr>
<tr><td>Fourth</td><td>​Lead</td><td>mbcFilms</td></tr>
<tr><td>​​I'm Not Real</td><td>Lead</td><td>mbcFilms</td></tr>

</div>

Voice Over

Place the following code under the Voice Over heading within an Embed Code Element:

<div class="resume-wrapper">

<table class="resume">

<!-- Table Header Row -->

<tr>
<th>Show</th>
<th>Role</th>
<th>Production Company</th>
</tr>

<!-- Filmography Rows -->

<tr><td>Ben Shapiro: The Movie</td><td>Newscaster</td><td>​​Mechanic Shark </td></tr>
<tr><td>Broke Down​</td><td>​Lyle</td><td>​LimINK Productions</td></tr>
<tr><td>Florida Man: The Movie</td><td>FBI Guy</td><td>​​Mechanic Shark ​</td></tr>
<tr><td>Resident Evil 2 & 3 SP00D​</td><td>Elliot, Alligator, USBC 3, Zombies</td><td>​DarkAbridgerEX​</td></tr>
<tr><td>Internet Tutorial Guy: The Movie​</td><td>Radar Guy</td><td>​​Mechanic Shark ​</td></tr>
<tr><td>Black Site​</td><td>​Captain</td><td>​LimINK Productions</td></tr>
<tr><td>​The Paradoxal Dilemma​ (Podcast Drama)​</td><td>​16th Doctor​</td><td>Van Wyk Productions</td></tr>
<tr><td>Clunky Hero (video Game)​</td><td>​Stressed Knight</td><td>​Chaosmonger Studio</td></tr>
<tr><td>Screecher (Machinima Film)​</td><td>ODST 2</td><td>​LimINK Productions</td></tr>
<tr><td>God Help Us (Series)​</td><td>Chris the Guidance Counselor</td><td>Shannon Doran​</td></tr>
<tr><td>​Pillow Pal (Infomercial) ​</td><td>​Spokesperson</td><td>Jawa Films</td></tr>
<tr><td>36 for 36 (Documentary Series) ​</td><td>Title Announcer</td><td>​Motown Maurice Productions</td></tr>

</div>

Music Video

Place the following code under the Music Video heading within an Embed Code Element:

<div class="resume-wrapper">

<table class="resume">

<!-- Table Header Row -->

<tr>
<th>Show</th>
<th>Role</th>
<th>Production Company</th>
</tr>

<!-- Filmography Rows -->

<tr><td>Thee Oh Sees "The Axis" </td><td>Principal​</td><td>Les Femmes Productions​</td></tr>
<tr><td>Bart Baker "Kill 'Em With Kidness" (Parody)</td><td>Principal​</td><td>Maker Studios​</td></tr>
<tr><td>​Deacon White "We Gon Die Anyway"</td><td>Principal</td><td>​​Adishaku Media</td></tr>

</div>

[rajjawa]

Wow that's tremendous and I'm incredibly grateful that you went to all that trouble. Unfortunately the code doesn't seem to be operating as intended. I made some tweaks but I reverted back to your original code but it's stacking the tables in a way that doesn't match the WYSIWYG editor in Weebly.

You can see header and then table data, then repeat (header then data) in Weebly as it should appear sans CSS formatting.

But when published it shows two headers together (TV and Film) and then the first set of data (TV), then the next header (VO) (which hasn't been changed to your code yet) before showing the next set of data (Film).

In WeeblyPublished Desktop Version 1Published Desktop Version 2

[PaulMathews]

@rajjawa All this means is that your titles aren't in the right place. Each title should be right above the relevant tabular code block. If you see two titles together, just drag the second title below the first title's tabular code block. So, your page should be title followed by code block followed by title followed by code block, etc. Sometimes the positioning blue i-beams in Weebly don't properly tell you where the items you're dragging are going to drop. That's particularly the case when you drag large elements (like our code blocks). Instead, drag and drop the simple title elements where you need them to be.