Striped tables in Kookaburra

tomowensphoto · December 26, 2024, 11:21am

I am not a developer, so as usual, I’m looking for help from more knowelgeable types as to what to do.
I am wondering why this

<table class="table-striped">
<thead>
<tr>
    <th>Group Exhibitions</th>
    <th style="text-align:left;"></th>
</tr>
</thead>
<tbody>
<tr>
    <td>Exhibition</td>
    <td style="text-align:left;">Venue</td>
    <td style="text-align:left;">Dates</td>
</tr>
<tr>
    <td>Historic & Contemporary Photography 'equals'</td>
    <td style="text-align:left;">Ipswich Art School Gallery</td>
    <td style="text-align:left;">18<sup>th</sup> May - 1<sup>st</sup> September 2013</td>
</tr>
<tr>
    <td>Slack Space  'equals'</td>
    <td style="text-align:left;">Colchester</td>
    <td style="text-align:left;">12<sup>th</sup> - 22<sup>nd</sup> June 2013</td>
</tr>
<tr>
    <td>Ephemera - Artist-in-Residence with 'equals'</td>
    <td style="text-align:left;">Ipswich Town Hall</td>
    <td style="text-align:left;">3<sup>rd</sup> - 14<sup>th</sup> September 2013</td>
</tr>
<tr>
    <td>Lux Locus Spectaculo</td>
    <td style="text-align:left;">Ipswich Town Hall</td>
    <td style="text-align:left;">16<sup>th</sup> July 2015 - 31<sup>st</sup> March 2016</td>
</tr>
<tr>
    <td>University of Suffolk</td>
    <td style="text-align:left;">Ipswich Hospital</td>
    <td style="text-align:left;">March 2015 to date</td>
</tr>
<tr>
    <td>Lux Locus Degree Show</td>
    <td style="text-align:left;">UCS North campus</td>
    <td style="text-align:left;">June 2014</td>
</tr>
<tr>
    <td>Lux Locus Free Range 2014</td>
    <td style="text-align:left;">Truman Brewery London</td>
    <td style="text-align:left;">June 2014</td>
</tr> 
<tr>
    <td>RPS International Photobook Exhibition - curator and exhibitor East London Photomonth</td>
    <td style="text-align:left;">Espacio Gallery, Bethnal Green, London</td>
    <td style="text-align:left;">18<sup>th</sup> October 2016 - 23<sup>rd</sup> October 2016</td>
</tr>  
<tr>
    <td>Edition 5 with the Rooftop Collective as part of International East London Photomonth</td>
    <td style="text-align:left;">The Clerkenwell Gallery, London</td>
    <td style="text-align:left;">25<sup>th</sup> October 2016 - 30<sup>th</sup> October 2016</td>
</tr>   
<tr>
    <td>2 Years</td>
    <td style="text-align:left;">M F Gallery & Framing, Ipswich</td>
    <td style="text-align:left;">29<sup>th</sup> October 2016 - 26<sup>th</sup> November 2016</td>
</tr> 
<tr>
    <td>Kerseys "Ipswich Interpretations"</td>
    <td style="text-align:left;">Kerseys, Ipswich</td>
    <td style="text-align:left;">8<sup>th</sup> December 2016 - 8<sup>th</sup> June 2017</td>
</tr>   
<tr>
    <td>Photograd Anniversary Show</td>
    <td style="text-align:left;">University of Suffolk, Ipswich</td>
    <td style="text-align:left;">April  2017</td>
</tr> 
<tr>
    <td>VIEWPOINTS - with the Rooftop Collective featuring Consuelo Simpson responding to my work with 5 other photographers and artists in conversation curated by Anna McNay</td>
    <td style="text-align:left;">Espacio Gallery Bethnal Green, London</td>
    <td style="text-align:left;">April 17<sup>th</sup>-22<sup>nd</sup> 2018</td>
</tr> 
<tr>
    <td>Photograd as part of International biennial PhotoEast 2018 </td>
    <td style="text-align:left;">University of Suffolk</td>
    <td style="text-align:left;">June 2018</td>
</tr>              
<tr>
    <td>Photograd as part of International East London Photomonth 2018 </td>
    <td style="text-align:left;">London Metropolitan University London</td>
    <td style="text-align:left;">November 2018</td>
</tr>  
<tr>
    <td>Landscape Rebels  - an edit from Welcome to the Funny Farm</td>
    <td style="text-align:left;">Christchurch Mansion, Ipswich</td>
    <td style="text-align:left;">October 22<sup>nd</sup> 2022 - April 16<sup>th</sup> 2023</td>
</tr>              
</tbody>
</table>
<table class="table-striped">
<thead>
<tr>
    <th>RPS East Anglia Contemporary Group Exhibitions</th>
    <th style="text-align:left;"></th>
</tr>
</thead>
<tbody>
<tr>
    <td>Exhibition</td>
    <td style="text-align:left;">Venue</td>
    <td style="text-align:left;">Dates</td>
</tr>
<tr>
    <td>Contradictions</td>
    <td style="text-align:left;">Beyond the Image</td>
    <td style="text-align:left;">27<sup>th</sup> May - 19<sup>th</sup> June 2016</td>
</tr>
<tr>
    <td>MEUS - an official PhotoEast 2018 Fringe as part of this international biennial</td>
    <td style="text-align:left;">Ipswich Town Hall</td>
    <td style="text-align:left;">May 2018</td>
</tr>
<tr>
    <td>MEUS - a Post-PhotoEast 2018 Fringe</td>
    <td style="text-align:left;">Frame Workshop & Gallery, Ipswich</td>
    <td style="text-align:left;">July 2018</td>
</tr>
</tbody>
</table>
<table class="table-striped">
<thead>
<tr>
    <th>Solo Exhibitions</th>
    <th style="text-align:left;"></th>
</tr>
</thead>
<tbody>
<tr>
    <td>Exhibition</td>
    <td style="text-align:left;">Venue</td>
    <td style="text-align:left;">Dates</td>
</tr>
<tr>
    <td>Featured Artist</td>
    <td style="text-align:left;">M F Gallery & Framing, Ipswich</td>
    <td style="text-align:left;">April 2015</td>
</tr>
<tr>
    <td>Edgelands an 8 month solo exhibition with the sponsorship of Kodak Alaris</td>
    <td style="text-align:left;">Museum of East Anglian Life</td>
    <td style="text-align:left;">July 2015-March 2016</td>
</tr>
<tr>
    <td>Featured Artist</td>
    <td style="text-align:left;">M F Gallery & Framing, Ipswich</td>
    <td style="text-align:left;">September 2018</td>
</tr>
<tr>
    <td>Welcome to the Funny Farm</td>
    <td style="text-align:left;">Flower tent, Allotment Association, Suffolk Show 2022</td>
    <td style="text-align:left;"> May 31<sup>st</sup>- June 1<sup>st</sup> 2022</td>
</tr>
<tr>
    <td>Welcome to the Funny Farm</td>
    <td style="text-align:left;">Flower tent, Allotment Association, Suffolk Show 2023</td>
    <td style="text-align:left;"> May 31<sup>st</sup>- June 1<sup>st</sup> 2023</td>
</tr>
</tbody>
</table>
<table class="table-striped">
<thead>
<tr>
    <th>Permanent Exhibitions</th>
    <th style="text-align:left;"></th>
</tr>
</thead>
<tbody>
<tr>
    <td>Exhibition</td>
    <td style="text-align:left;">Venue</td>
    <td style="text-align:left;">Dates</td>
</tr>
<tr>
    <td>Orwell Bridge at 11.9m wide 1.6m high</td>
    <td style="text-align:left;">Atrium North Campus University of Suffolk</td>
    <td style="text-align:left;">September 2016 to date</td>
</tr>
<tr>
    <td>Felixstowe Docks at sunrise August BH Monday 2016 at 8.1m wide 1.6m high</td>
    <td style="text-align:left;">Atrium North Campus University of Suffolk</td>
    <td style="text-align:left;">September 2016 to date</td>
</tr>
</tbody>
<table class="table-striped">
<thead>
<tr>
    <th>Virtual Exhibitions</th>
    <th style="text-align:left;"></th>
</tr>
</thead>
<tbody>
<tr>
    <td>Exhibition</td>
    <td style="text-align:left;">Venue</td>
    <td style="text-align:left;">Dates</td>
</tr>
<tr>
    <td>Photograd Virtual Festival 2021</td>
    <td style="text-align:left;">Making Vernacular Images</td>
    <td style="text-align:left;">April 12<sup>th</sup> 2021</td>
</tr>
<tr>
    <td>EACG Virtual Festival 2022</td>
    <td style="text-align:left;"><a href="https://www.artsteps.com/view/618695ed78f08e01171a6afb" target="_blank">Self</a></td>
    <td style="text-align:left;">January 26<sup>th</sup> 2022 to date</td>
</tr>
<tr>
<td>EACG Virtual Festival 2022</td>
    <td style="text-align:left;"><a href="https://www.artsteps.com/view/62ee5e68d0bc75523fd52655" target="_blank">Weekend</a></td>
    <td style="text-align:left;">September 1<sup>st</sup> 2022 to date</td>
</tr>
<td>EACG Virtual Festival 2023</td>
    <td style="text-align:left;"><a href="hhttps://www.artsteps.com/view/6425b4ea3e871e67372623e5" target="_blank">Waldo</a></td>
    <td style="text-align:left;">April 1<sup>st</sup> 2023 to date</td>
</tbody>
</table>

does not present in Kookaburra as it does in Pangolin

I know that the Tables formatting section is still not available in Kookaburra Typography section of templates and the above formatting works OK in Pangolin so what do I have to do to make the alternate stripes work for these tables in Kookaburra? Do I have to add something to CSS that replaces the Pangolin functionality?

I’m not sure why I always look at this stuff on Bank Holidays but the weather is dreich and it seemed like a good idea when I started looking at my Kookaburra test site.

Link to test site Exhibitions - OWENS
Link to Pangolin live site Exhibitions - OWENS

Thanks.
TomO

rod_barbee · December 26, 2024, 12:21pm

Matt has recently added table styling to the Kookaburra roadmap. Until then you’d need to use custom css.
You might be able to copy/paste from the Pangolin css.
You can find that by either using the browser inspector or by viewing the Pangolin CSS

tomowensphoto · December 26, 2024, 1:01pm

Thanks Rod,
Happy holidays.
TomO

rod_barbee · December 26, 2024, 3:21pm

If you want to just copy and paste the Pangolin css, you can go to your Pangolin page and right-click on the table. From the context menu that pops up, choose Inspect. (I use Firefox. Chrome is similar)
This should show you what css is affecting the item you right-clicked on.Look for the <table> tag and click on that.

On the right side of the page (depending on the browser), you’ll see the rule governing the element. You should also see a numerical link (green circle in the screen cap).

Clicking on that will take you to its location in the css file.

Scroll up until you find the start of the Table section and copy starting at that point

and ending where you see the table css ending

Paste this css into your Kookaburra custom css file.

You may need to tweak things like table width (Or control that with page width in the page template.)

tomowensphoto · December 26, 2024, 5:36pm

Many thanks Rod,
I’ll give this a go.
TomO

tomowensphoto · December 27, 2024, 7:24am

Thanks Rod,
That worked out OK thanks. Displays fine in different scales on laptop but drops a top right border on an actual iPhone, but that happened in Pangolin also.

EDIT
After a lot of digging I added this to the table head
<th scope="row" colspan="3">
It filled all column heads rather than leaving the right-hand blank.
TomO

tomowensphoto · December 29, 2024, 11:33am

Having copied the CSS from Pangolin to Kookaburra and got the table-striped to work, I’m getting white space at the end of the rows in the table. I’m not at all sure what is causing this or the fix.

Grateful for any pointers.
TomO

rod_barbee · December 29, 2024, 1:50pm

Do you have a link to the page containing that table?
I suspect that there’s some padding-right somewhere.

tomowensphoto · December 29, 2024, 1:57pm

Hi Rod,
Exhibitions - OWENS (Kookaburra) is where the trailing space is
The same CSS does not do this on the Pangolin page here Exhibitions - OWENS
Thanks.
TomO

rod_barbee · December 29, 2024, 2:08pm

It looks totally different in Safari iOS (iPad), but looks like your screen cap in Chrome iOS

I’ll poke around.

tomowensphoto · December 29, 2024, 2:16pm

It looks the same on my iPhone 18.1.1 Safari as in the Firefox screen grab on Sequoia 15.2

rod_barbee · December 29, 2024, 3:36pm

I may need to clear Safari cache.
I looked at it in an inspector app on my ipad and the formatting looks like your screen shot.
I found left and right padding in a th, td rule. When I removed it, the cells filled the width of the table but then had no padding to separate the cells.

There must be some other Kookaburra css that’s affecting things but I can’t see it yet.
@Matthew will probably need to weigh in.

I’ll try looking again when I get to my pc; the iPad app isn’t the easiest tool to use.

tomowensphoto · December 29, 2024, 3:52pm

Thanks Rod,
It was a long shot trying to test this out but at least it acts as some form of use case test I suppose.
I cannot see that rule in the CSS I copied from the Pangolin page tp place in the custom css for my Kookaburra test site, and I don’t see it in the Mark Up either for the page content.
What is interesting though is that the border formatting (on the iphone) failed the same in both Pangolin and Kookaburra before I filled to top top row and added the span command. I suspect that the solid colour is masking the lack of top right cell border.
Hopefully it will be useful for @Matthew when he begins table styling for Kookaburra.
Thanks for your time.
TomO

Daniel · December 29, 2024, 10:32pm

@tomowensphoto , check your source code. You have 4 <th> elements (one <th> with colespan=3 and one empty one), but only 3 <td>.

rod_barbee · December 30, 2024, 5:10am

There is also at least one closing </table> tag missing.

tomowensphoto · December 30, 2024, 8:50am

Thanks for the feedback Rod & Daniel.
I found the missing closing

</table>

and the culprit (my fingers) was the “colspan=3” qualifier. Once removed, the table row formatting extended to the full width of the table.
Best wishes for 2025.
TomO

Daniel · December 30, 2024, 2:51pm

The reason for the colspan=3 is to avoid a line break when the table is not that wide:

The culprit was the extra <th></th>.

tomowensphoto · December 30, 2024, 3:06pm

Thanks Daniel.
I struggled to find that extra <th></th>. What section was that in? I am a self-professed muppet when it comes to this. I may have too many lines in the Mark Down than I need.
TomO

Daniel · December 31, 2024, 12:53am

Hi Tom, it used to be something like this

<thead>
<tr>
    <th colspan="3">Solo Exhibitions</th>
    <th style="text-align:left;"></th>
</tr>
</thead>

This results in 4 columns. The second <th>..</th> is one too many. The following results in three columns:

<thead>
<tr>
    <th colspan="3">Solo Exhibitions</th>
</tr>
</thead>

I mainly commented for others following this thread or searching for a solution.

tomowensphoto · December 31, 2024, 6:19am

Many thanks for illustrated example Daniel.
I’ll re-visit my code with a different thinking cap on.
I had no idea adding text justification like that was adding columns.
TomO