Posted by Stuart McLachlan on

Hello All,

I have 2 tables on 2 different pages.

https://www.capel-pc.gov.uk/councillors-and-committees/beare-green/

and

https://www.capel-pc.gov.uk/councillors-and-committees/capel/

On the Capel page the table rows are too narrow and I cant find the setting to change their width. The Beare Green table is the correct width without me making any changes.

2: Re: Row Width in a table (response to 1)
Posted by Joe Oldak on

Hi Stuart,

Tables will try to take a "natural" width based on the contents, unless you go down the route of setting cell widths. Note that HTML tables don't really have a concept of columns (they have rows and cells). So to set a column width it really means setting lots of cell widths.

So there are a few options here. If you want to stick with a table, you can set width on either the whole table or on cells. If you set it on the whole table the cells will try to figure themselves out.

I'd suggest using percent rather than pixels so that it scales to different browser widths. You can set table width using the Insert/Edit Table button.

To set cell width use the Table Cell Properties button to set a width, and you can select "Update all cells in column" before OKing it.

A better way?

You could try presenting this information using the new Carousel, Accordion, or Grid includelet, in Grid mode.

Using this includelet you can easily create a content block for each councillor, with a picture for each, and get a nice layout that looks modern and resizes well for desktop and mobile browsers, and is easy to edit in future.

(I tend to think that tables are really only good for showing data that really is tabluar. If you're trying to use a table for layout purposes there's usually a better way!)

Thanks

Joe - Voice Admin

3: Re: Row Width in a table (response to 2)
Posted by JoMaye on

We have something similar here: https://www.kingstoncarers.org.uk/who-we-are/meet-our-team/

I made this using a filtered item list includelet but if I were to do it now, I'd do it using the new grid from the carousel, slider or grid includelet.