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;

}