如何將劍道網格標題文本保持在頂部？

Question

我正在使用kendo數據網格，其中標題文本有小問題，某些標題標簽具有長文本，因為該標題文本由於headerHeaderAttributes看起來不太好，因為我使用的是換行符並使標題較大，因此小文本未對齊正確地。 有沒有一種方法可以將所有標頭放置在頂部，以便看起來一致？

gridConfig.js

columns : [

                {
                    field : '',
                    title : 'Action',
                    width: '80px'
                    },


                }, {
                    field : 'riskAssessmentChallengeKey',
                    title : 'Challenge ID',
                    width: '100px',
                    headerAttributes: {
                        style: 'height: auto; white-space: normal'
                    }

                },
                 {
                  field : 'createWorkerText',
                  title : 'Created By',
                  width: '120px',
                  headerAttributes: {
                      style: 'height: auto; white-space: normal'
                                }

              },
]

Answer 1

display: table-cell; vertical-align: top; text-align: center一些變化display: table-cell; vertical-align: top; text-align: center display: table-cell; vertical-align: top; text-align: center

或display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: top; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: top;

我也可能會在CSS fie中這樣做，並在headerAtrributes添加一個類

"class": "mygrid-header-cell",

然后，您可以將css放入它所屬的css文件中。

編輯注意，您也可以像這樣做CSS：

headerAttributes: { "class": "mygrid-header-cell"}

和CSS

.k-grid-header .mygrid-header-cell {
  text-align: center;
  display: table-cell; vertical-align: top;
}
.k-grid-header .wrap-header {
  height: auto;
  overflow: visible;
  white-space: normal;
}

Answer 2

我遇到了類似的問題，我做了這樣的事情：

 .k-grid-header th.k-header {
    vertical-align:top;
  }

  .k-grid-header th.k-header > .k-link {
    max-height: 65px;
    white-space: normal;
    vertical-align: text-top;
    text-align: center;
    text-overflow: ellipsis;

}

這是我使用的一些代碼（請參見示例）： http : //dojo.telerik.com/OPICO

縮小並調整輸出窗口的大小以查看其效果。