css - 如何更改 handsontable 行标题宽度？

Question

我无法使用可操作电子表格更改行标题的宽度。 我试过这篇文章中引用的 CSS:Handsontable increase row header width : 从我读过的内容来看，你不能像列一样使用 rowWidths，但你必须进入行标题本身的 CSS。

.handsontable col.rowHeader {
    width: 180px;
}

Picture of the problem .

CSS 在这里:

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;
}`

这是电子表格的 JS:

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:<div id="example" class="handsontable"></div>

Answer 1

您没有提供足够的信息。我只能建议要么；

• 您的 CSS 不够具体，并且没有覆盖 handsontable 库附带的任何 CSS
• 您使用了错误的选择器，因此未应用 CSS。

编辑:你能试试下面的 CSS 吗？

.ht_clone_left.handsontable tbody tr th { width: 180px; }