Elder Brothers of Table : Cross Table, Summary Table and Graphical Table

in , ,  
Recently I published an article about Styling Tables ,and then I observed something. Spotfire reuses the same class elements for most of Cross Table, Summary Table and Graphical. (Now we can understand why there are only a few customization options under Theme 😏)
Anyways, when we are styling stuffs already, why not to do it for all three of them in one go ? Code for you -
<style>
.sfc-style-root .sf-element-table-cell.sfpc-odd-row {
   background-color: chocolate;
   color: white;}
.sfc-style-root .sf-element-table-cell {
background-color: burlywood;
}
.sfc-style-root .sf-element-table-cell.sfpc-total-value {
    font-weight: Bold;
color:white;
background-color: chocolate;
}
.sfc-style-root .sf-element-visual-content.sfc-cross-table .sf-element-table-cell.sfc-column-header {
background-color: #858585;
color:white;
}

 .sf-element-table-cell.sfc-row-header {
background-color: #454545;
color:white;
}
.sfc-style-root .sf-element-visual-content.sfc-summary-table .sf-element-table-cell.sfc-column-header {
background-color: #858585;
color:white;
}
.sfc-style-root .sf-element-table-cell.sfc-column-header {
    color:white;
    background-color: #454545;
}
</style>
I know, you may be struggling with HTML Sanitization. So don't worry, you can use JavaScript too -
if(!$('#AlienBox').length){
$('body').append($(`<style id="AlienBox">
.sfc-style-root .sf-element-table-cell.sfpc-odd-row {
   background-color: chocolate;
   color: white;}
.sfc-style-root .sf-element-table-cell {
background-color: burlywood;
}
.sfc-style-root .sf-element-table-cell.sfpc-total-value {
    font-weight: Bold;
color:white;
background-color: chocolate;
}
.sfc-style-root .sf-element-visual-content.sfc-cross-table .sf-element-table-cell.sfc-column-header {
background-color: #858585;
color:white;
}

 .sf-element-table-cell.sfc-row-header {
background-color: #454545;
color:white;
}
.sfc-style-root .sf-element-visual-content.sfc-summary-table .sf-element-table-cell.sfc-column-header {
background-color: #858585;
color:white;
}
.sfc-style-root .sf-element-table-cell.sfc-column-header {
    color:white;
    background-color: #454545;
}
</style>`, {
        id: 'AlienBox' 
   }));
}
Here is what we got in the end :
Share: