Table Seperations CSS

Hi
I am building a soccer website and have to build the tables and fixture table, the column width on each of them have to be different sizes I have figured out how to get the columns to the size I need but my problem is it changes the sizes of the columns in every table/fixture list to the same can someone advice me on how to get the sizes correct on each separate table, is there a CSS code I can put in to make it aware I only want a particular size for that table and not change every table on the page, I have enclosed a screen shot of the CSS I have at the moment which is for one of the tables but need something so I can change column widths etc individually in each table without changing the lot.

Thanks

That looks a very fiddly way to display a table. Wouldn’t something like PowerGrid be better?

That is built with Power Grid.

Sorry! Wrong name. I meant Power Grid CSV, G Sheet, or any similar Stack which can import from a spreadsheet.

Markdown is even easier - and free :slight_smile:

2 Likes

Getting back to your question:

There should be an easy solution here.

I don’t have the power grid stack, but there should be a place in the inspector to add CSS classes (on most stacks it’s under the HTML submenu).

Simply put a made-up name into that area, for example table01.

Then on the CSS statements that you want to only be for that individual table, you would add the newly added class name proceeded by a period( .).

.table01 .col0 { width:  260px}
  • The newly made-up class name can be applied to multiple power grid stacks, so you can use the same CSS on multiple tables.
  • If you have any CSS that you want to apply to every table leave those without the new made-up names.
  • The made-up names need to be valid CSS class names (you can easily find those requirements by searching).

If you need more help it’s always best if you can publish at least a test page and provide a url.

1 Like

Btw, I answered this on your other post

Do you mean like this (see pics)


First off remove the period . in the CSS classes area of the stack setting
should be

league01

Since I don’t own the stack without a URL, it’s had to say for sure on the CSS portion, but my gut tells me that you would want a space between the two selectors.
For example,

.league01 .col10 {width: 260px; }
1 Like

Line 8 and line 23 are missing their units of measurement.

1 Like

Tables are nice if they are not overwhelming.

Here they can be generated:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.