Question

我无法使用免提电子表格更改行标题的宽度。我已经尝试过这篇文章中引用的CSS：Handsontable increase row header width：从我读过的内容来看，你不能像列一样使用rowWidth，但你必须进入行标题本身的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不够具体，并且没有覆盖handontable库带来的CSS。
您使用了错误的选择器，因此未应用CSS。

编辑：您可以尝试下面的CSS;

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

如何更改指定行标题宽度？

1 个答案: