Styling my table

Hi all,
​
I am using CC v6 for showing data on my website. By default the style of my table is "ui selectable table". I would like to style my table using CSS, but cannot find a way to get it working. I tried several things: added a new CSS element to my CC v6 connection, tried the column classes.
​
Can someone explain to me where add/change the CSS code to style my table view?

Hi
You can add a class for your table: "ui selectable table myclass"
​
then you can add a view with css element with a content like this:
table.myclass {background-color: red}
​
If it's dont work:
table.myclass {background-color: red !important}
​
You can also use the table id:
table#myid {background-color: red !important}
​
Bye

Hi,
​
Where exactly can I give the table created with "VIEW / Lists / Table" its own ID (#idname)?
And how do I get a "tfoot" area at the bottom of the table?
​
:-)

Yes. You can modify your css class by Id
table#table_id {background:red !important;} Nota: !important is not always necessary. It depends of your template.
The table Id is the Unit Name of your Table List (in grey).
​
You also Add a class by Behavior/Add Custom HTML Tags/Attribute Name=class, Attribute value=your_class
So, you can modify your css class by
table.your_class {background:red !important;}
​
In fact, you can modify directly some attributes with "Add Custom HTML Tags", but sometime it don't works...
​
You can use the Development tool of your navigator to know precisely the CSS of your template, or select an element - a word, a picture, etc - on your front page and use Inspector tool (Google Chrome, Firefox).

I don't understand what you mean by that. To do this, I don't have to create a table with "table" but "manually" in "Custom Code"?

Sorry , My English is very bad.
And I've not read very well: my last answer was for Chronoforms7 !!! 😡
But my first anwer was good.
​
With CC6:
1 - you create a Table by List/Table with a provider for the datas, for exemple Name : my_table
2 - You give a Class of your table by Class : my class (you can keep default "ui selectable table", but is more easy to replace by "my_class" to override all rules).
3 - You create a CSS view by Custom/CSS, for exemple Name : my_css
4 - In this CSS element, you write some rules like: table.my_class {background:red;}
5 - In index event (or event what you need the table), you call {view:my_css} before call the view of your table {view:my_table}. Sure, before all, you must have a data provider (by a Read Data or a PHP Element building an array) to place in my_table.
​
I don't think that List Table create a tfoot tag, but you can built one by table.my_class tr:last-child {color:blue}
​
Christian (France)

Hi,
:-) yes, i understood that.
My problem is that i don't understand where exactly to put an ID_Attribute for the table.
I can only assign CSS_Attribute here.
​
F.

Your Id is the Name of the Element Table, so "articles_list" in your example...
You can do in a CSS View:
table#articles_list {background:red;}
may be table#articles_list {background:red !important;} to override all previous rules
​
Other way:
Class=your_class
in a CSS View:
table.your_class {background:red;}

mh...doesn't work for me as it should ...
so is correct:
<tabel id="articles_ist" class="ui selectable table state small datenfreigabe unstackable">

Give only one class to your table: Class: myclass
​
Then, in css view:
table.myclass {background:red;}
​
It works for me...

:-)
but I need an ID attribute in the table tag, not a css, because I need the ID for a Javascript, for example:For example: <table id = "demo"> or <table id = "table_list">