Adding a CSS class to a table

  • 3
  • Question
  • Updated 4 years ago
  • Answered
What's the best way to add a CSS class to an HTML element that is rendered by Skuid? My use case is that I have a Skuid table that I'd like to style using Bootstrap styles, but I need to add their CSS class to the HTML table element, which Skuid doesn't expose. (Skuid only allows adding a CSS class to the table's surrounding DIV.)

Is there a Javascript snippet approach that would do it?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb

Posted 5 years ago

  • 3
Photo of John Nelson

John Nelson, Product Manager

  • 3,234 Points 3k badge 2x thumb
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.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
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 tag itself. See image:



To use Bootstrap table styling, I'm pretty sure I need to have the class set directly on the table. I think ...
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
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');
});
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
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');
});
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Thanks Ben. I figured there'd be a Javascript hack! I'll give this a try.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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;
}
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
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?
Photo of Sasidharreddy myf

Sasidharreddy myf

  • 152 Points 100 badge 2x thumb
Hi Glenn Elliott...

i think this will work fine to you...

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

background-color: #F5F5F5;

}