How to change handsontable row header width? - css

Question

I can't change the width of the row header using the handsontable spreadsheet.
I've tried the CSS that is referenced in this post: Handsontable increase row header width: From what I've read you can't just use rowWidths like columns but you have to go into the CSS of the row header itself.
.handsontable col.rowHeader {
width: 180px;
}
Picture of the problem.
CSS is here:
html {
background-color: #e6e9e9;
background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
-webkit-font-smoothing: antialiased;
}
body {
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 800px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
background-color: #ffffff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
}
a {
color: #34A9DC;
text-decoration: none;
}
p {
margin: 5px 0 20px;
}
h4 {
margin: 20px 0 0;
font-size: 22px;
font-weight: normal;
}
.topcorner {
position:relative;
float:right;
top:0px;
right:16px;
}
#total {
font-size: 20px;
margin: 2 auto;
padding: 4em 4em 4em;
}
.handsontable col.rowHeader {
width: 180px;
}`
Here is the JS for the spreadsheet:
var hot = new Handsontable(container,
{
data: getData(),
colHeaders: ["Quantity","Cost","Amount"],
rowHeaders: ["Flights",
"Taxi & Bus",
"Hotel(nights, cost/night)",
"Breakfast & Lunch",
"Dinners",
"Museum Tickets",
"Live Show Tickets",
"Driving(miles, cost/mile)"],
manualColumnResize: true,
columns: [
{
data: 'quantity',
type: 'numeric',
language: 'en'
},
{
data: 'cost',
type: 'numeric',
format: '$0,0.00',
language: 'en'
},
{
data: 'amount',
type: 'numeric',
format: '$0,0.00',
language: 'en'
}
],
colWidths:[80,120,150]
});
HTML div I'm using: <div id="example" class="handsontable"></div>

Answer 1

You haven't provided anywhere near enough information. All I could suggest is that either;
your CSS is not specific enough and there is not overriding whatever CSS comes with the handsontable library
your using the wrong selector and therefore the CSS is not being applied.
EDIT: Can you try the CSS below;
.ht_clone_left.handsontable tbody tr th { width: 180px; }