Formatting Pivot Header Rows And Columns Via CSS
Introduction
Use this script to format the header rows and columns of a Pivot table.
Instructions
Create a Pivot table > Save It > Go back to the Edit Window > Edit Script.
widget.on("ready", function(w, args) {
//header columns
var $ps1 = $(".p-grand-total-head,.p-dim-head", element);
$ps1.css('font-size' , '14px');
$ps1.css('font-weight' , 'bold');
$ps1.css('color' , 'white');
$ps1.css('background-color' , '#4B6B9E');
$ps1.css('text-align' , 'center');
$ps1.css('vertical-align' , 'middle');
//total rows
var $ps2= $(".p-total-row-val,.p-total-row-head", element);
$ps2.css('font-size' , '12px');
$ps2.css('font-weight' , 'plain');
$ps2.css('color' , 'white');
$ps2.css('background-color' , '#9EB6E6');
$ps2.css('border-top', 'none');
$ps2.css('border-right', 'thin solid #C0C0C0');
//header values
var $ps3 = $(".p-dim-member", element);
$ps3.css('font-size' , '13px');
$ps3.css('font-weight' , 'bold');
$ps3.css('color' , '#5b9bbc');
$ps3.css('text-align' , 'left');
//Set bottom border for all cells
$tcells = $("[fidx]", element);
$tcells.css('border-bottom', 'thin solid #5b9bbc');
$tcells.css('border-right', 'thin solid #C0C0C0');
});
Updated 02-13-2024
intapiuser
Admin
Joined December 15, 2022