Alloy Table styling

Hello. Building tables using MD in Alloy but want to style them. There’s the great Styling option for Quotes in Alloy but not one for Tables.

As such, I’m presuming this can be done with CSS which I’m new to.
I’ve read the tutorial on Bootstrap Table Styling
(here: Tables · Bootstrap v5.0) but can’t get it to work.

For example, if I want a dark striped table, the CSS is

<table class="table table-dark table-striped">

which I’ve pasted into the CSS tab of the HTML Code in the Alloy control stack on that page. I’d assumed this would then style all tables on that page accordingly.
It doesn’t.

What’s the really dumb thing I’m doing wrong?!

Please ignore my idiocy. Fixed it by reading much more.

If anyone’s interested, the answers are in the W3 schools page on Table Styling here:

I’ve copied this code:

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #04AA6D !important;
  color: white; }

td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}

to the HTML Code → CSS space in the Foundry 3 Control Center stack.

This gives a padded, outlined, alternate row grey with row hover and a white-on-green table header:

Was stuck until I realised I had to use

!important

to over-ride the page setting.

Hope this helps someone.

1 Like