Adding a CSS class to a table

Hey Glenn, are you running the most recent version of Skuid? If so, click on the Advanced Properties for the table and you’ll be pleased by what you find. 🙂 …Unless of course you’re fully aware of this new feature and you’re actually asking something a little deeper. In which case I’ll work up another snappy answer for you shortly.

Hey John … I’m on v3.7 and had seen the Id and Class settings now available, which is going to be great. But that didn’t quite work for this need. When I put a class in there (called “myclass”) for the table, Skuid ascribes that class to a that surrounds the tag, rather than to the

This might be a little hackish, but you could add a new javascript resource with resource location of “In-line” with content of

skuid.$(function(){ skuid.$('table').addClass('glenn'); }); 

if you wanted to be a little more targeted about a specific table, you could give that table component an id through skuid, and then use jquery to get at that specific element

skuid.$(function(){ skuid.$('#myuniqueid table').addClass('glenn'); }); 

Thanks Ben. I figured there’d be a Javascript hack! I’ll give this a try.

No need to use JavaScript to do this — the desired affect can be achieved through pure CSS. If the unique Id you apply to your Skuid Table Component is “ZachTable”, then just doing this will apply a style to all HTML table elements that are a descendant of this SKuid Table Component’s DOM wrapper:

#ZachTable table { text-align: center; border: 4px gray outset; } 

Specifically targeting the table body or header can be done like this:

#ZachTable tbody { text-align: center; } 

#ZachTable thead { font-size: 20pt; } 

Hey Zach … I’m with you on this approach for applying targeted styles to Skuid components (and am using it successfully quite a bit - works a treat). But in my scenario, I want to apply the Bootstrap style “table-hover” to my Skuid table and to use your approach here, I’d need to unpack Bootstrap, grab the CSS that they use in their “table-hover” class and add it to my CSS. Not the end of the world and possibly a good approach given that it removes a dependency on Bootstrap, but it does mean that I’m replicating Bootstrap, rather than using it. Am I thinking of this correctly?

Hi Glenn Elliott…

i think this will work fine to you…

table.nx-skootable-data>tbody>tr:hover>td {

background-color: #F5F5F5;

}