title: How to change handsontable row header width?
body: <p>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: <a href="https://stackoverflow.com/questions/31673255/handsontable-increase-row-header-width">Handsontable increase row header width</a>: 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. </p>
  
  <pre><code>.handsontable col.rowHeader {
      width: 180px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/jUhFR.jpg" rel="nofollow noreferrer">Picture of the problem</a>. </p>
  
  <p>CSS is here: </p>
  
  <pre><code>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;
  }`
  </code></pre>
  
  <p>Here is the JS for the spreadsheet: </p>
  
  <pre><code>var hot = new Handsontable(container,
   {
      data: getData(),
      colHeaders: ["Quantity","Cost","Amount"],
      rowHeaders: ["Flights",
                   "Taxi &amp; Bus",
                   "Hotel(nights, cost/night)",
                   "Breakfast &amp; 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]
  
    });
  </code></pre>
  
  <p>HTML div I'm using: <code>&lt;div id="example" class="handsontable"&gt;&lt;/div&gt;</code></p>