Skip to content

Instantly share code, notes, and snippets.

@tyoshikawa1106
Created August 7, 2014 14:56
Show Gist options
  • Save tyoshikawa1106/d2ba2ab1490f93592d0d to your computer and use it in GitHub Desktop.
Save tyoshikawa1106/d2ba2ab1490f93592d0d to your computer and use it in GitHub Desktop.
Google Chart Table CSS
<apex:page showHeader="true" sidebar="false">
<head>
<style>
.cssHeaderRow {
background-color: #2A94D6;
}
.cssTableRow {
background-color: #F0F1F2;
}
.cssOddTableRow {
background-color: #F0F1F2;
}
.cssSelectedTableRow {
font-size: 20px;
font-weight:bold;
}
.cssHoverTableRow {
background: #ccc;
}
.cssHeaderCell {
color: #FFFFFF;
font-size: 16px;
padding: 10px !important;
border: solid 1px #FFFFFF;
}
.cssTableCell {
font-size: 16px;
padding: 10px !important;
border: solid 1px #FFFFFF;
}
.cssRowNumberCell {
text-align: center;
}
</style>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var cssClassNames = {
'headerRow': 'cssHeaderRow',
'tableRow': 'cssTableRow',
'oddTableRow': 'cssOddTableRow',
'selectedTableRow': 'cssSelectedTableRow',
'hoverTableRow': 'cssHoverTableRow',
'headerCell': 'cssHeaderCell',
'tableCell': 'cssTableCell',
'rowNumberCell': 'cssRowNumberCell'
};
var options = {
showRowNumber: true,
cssClassNames: cssClassNames
};
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
}
</script>
</head>
<body>
<div id='table_div'></div>
</body>
</apex:page>
@WWMCODER
Copy link

Thank you. Is there a way to lock the header row when the table has a scrollbar?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment