5

Questions: I'm able to change background color of cells but not of the header. Can I change the background color as well as font color of the header in Handsontable?

Samuel Segal
  • 423
  • 1
  • 7
  • 18

3 Answers3

5

Add style tag in head of document. This will affect all HOT grids on the page. Still researching how to make different grids display with different styling.

   .handsontable table thead th{
        background-color: green;
        color:white;
        font-weight:bold;
        font-size:12px;
    }
Leslie Carpenter
  • 61
  • 1
  • 1
  • Place each HOT in its own div with a class. Then use the appropriate selector. `
    ...` In your css, select using `div.divHot1 .handsontable table thead th`
     – user4593252 Jan 16 '18 at 19:05
4

You could use jquery or css for this. For example, apply a background color to all the span.colHeader:

.handsontable span.colHeader {
    text-color: #B2B2FF; /* pink ish */
    background-color: #FF7878; /* red */
}

Or even easier, handsontable allows HTML for col headers so as an option, you can supply an array of the headers with HTML:

hot = new Handsontable(container, {
  data: items,
  startRows: 1,
  colHeaders: ['<label id="header1" style="background-color: blue">I'm the first header"</label>', '<label id="header2" style="background-color: red">I'm the second header"</label>']
  }
)
ZekeDroid
  • 7,089
  • 5
  • 33
  • 59
1

test this css to change handsontable header color 

.handsontable th {color: #f5ffa5 !important; background: #78DEFF !important; }
hussain parsaei
  • 29
  • 1
  • 6