如何在 SlickGrid 中将列 headers 的文本居中？

Question

如何在 SlickGrid 中将 (header) 列文本居中？ ...我通过 headerCssClass 添加的 class 是 header-number ...下面示例中的文本是 "RANK".

这是我 8 年前从另一个 Whosebug post 尝试过的方法...但它不起作用

.slick-header-column.header-number {
    text-align: center;
}

HTML 列元素的样式：

<!DOCTYPE html>
<html class="k-ie k-ie11">
<head>
<title></title>
<style>
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
 border: 1px solid #c5c5c5;
 background: #da1a1a;
 font-weight: normal;
 color: #454545;
}
.slick-header-column {
 background-color: #E0E0E0;
 border-right: 1px solid silver;
}
.slick-header-column.ui-state-default {
 position: relative;
 display: inline-block;
 overflow: hidden;
 -o-text-overflow: ellipsis;
 text-overflow: ellipsis;
 height: 16px;
 line-height: 16px;
 margin: 0;
 padding: 4px;
 border-right: 1px solid silver;
 border-left: 0px !important;
 border-top: 0px !important;
 border-bottom: 0px !important;
 float: left;
}
.slick-header-column.header-number {
 text-align: center;
}
.slickgrid_501462 .slick-header-column {
 left: 1000px;
}
.slick-header-columns, .slick-headerrow-columns, .slick-footerrow-columns {
 position: relative;
 white-space: nowrap;
 cursor: default;
 overflow: hidden;
}
.slick-header-columns {
 background-color: #E0E0E0;
 border-bottom: 1px solid silver;
}
.slick-header.ui-state-default, .slick-headerrow.ui-state-default, .slick-footerrow.ui-state-default {
 width: 100%;
 overflow: hidden;
 border-left: 0px !important;
}
.ui-widget {
 font-family: Arial,Helvetica,sans-serif;
 font-size: 1em;
}
.content-section {
 height: 100%;
 width: 100%;
 overflow: hidden;
 position: relative;
}
.main {
 height: 100%;
 width: 100%;
 position: fixed;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}
body {
 font-family: sans-serif, "Lato", Calibri, Arial;
 font-size: 0.8em;
}
html body {
 height: 100%;
 margin: 0;
 padding: 0;
}
.slick-sort-indicator {
 display: inline-block;
 width: 8px;
 height: 5px;
 margin-left: 4px;
 margin-top: 6px;
 float: left;
}
.slick-column-name, .slick-sort-indicator {
 display: inline-block;
 float: left;
 margin-bottom: 100px;
}
.slick-column-name, .slick-sort-indicator {
 margin-bottom: 0px;
}
.slick-header-menubutton {
 position: absolute;
 right: 0px;
 top: 0px;
 bottom: 0px;
 width: 12px;
 cursor: pointer;
 padding-left: 2px;
 display: none;
 border-left: thin ridge silver;
}
.slick-header-down::after {
 font-family: FontAwesome;
 content: "\f0d7";
 font-weight: 900;
 color: black;
}
.slick-resizable-handle {
 position: absolute;
 font-size: 0.1px;
 display: block;
 cursor: col-resize;
 width: 4px;
 right: 0px;
 top: 0px;
 height: 100%;
}
</style>
</head>
<body><div class="main"><div class="content-section" id="content-section"><div class="slickgrid_501462 ui-widget" id="ScClaCategoryGrid" style="outline: 0px; width: 2560px; height: 466px; overflow: hidden; position: relative;"><div class="slick-header ui-state-default" style="overflow: hidden; position: relative;"><div class="slick-header-columns" style="left: -1000px; width: 3560px;" unselectable="on"><div title="" class="ui-state-default slick-header-column header-number slick-header-sortable" id="slickgrid_501462rank" style="width: 116px;"><span class="slick-column-name">RANK</span><span class="slick-sort-indicator"></span><div class="slick-header-menubutton slick-header-down"></div><div class="slick-resizable-handle"></div></div></div></div></div></div></div></body>
</html>

Answer 1

删除float:left中的class.slick-column-name, .slick-sort-indicator

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
 border: 1px solid #c5c5c5;
 background: #da1a1a;
 font-weight: normal;
 color: #454545;
}
.slick-header-column {
 background-color: #E0E0E0;
 border-right: 1px solid silver;
}
.slick-header-column.ui-state-default {
 position: relative;
 display: inline-block;
 overflow: hidden;
 -o-text-overflow: ellipsis;
 text-overflow: ellipsis;
 height: 16px;
 line-height: 16px;
 margin: 0;
 padding: 4px;
 border-right: 1px solid silver;
 border-left: 0px !important;
 border-top: 0px !important;
 border-bottom: 0px !important;
 float: left;
}
.slick-header-column.header-number {
 text-align: center;
}
.slickgrid_501462 .slick-header-column {
 left: 1000px;
}
.slick-header-columns, .slick-headerrow-columns, .slick-footerrow-columns {
 position: relative;
 white-space: nowrap;
 cursor: default;
 overflow: hidden;
}
.slick-header-columns {
 background-color: #E0E0E0;
 border-bottom: 1px solid silver;
}
.slick-header.ui-state-default, .slick-headerrow.ui-state-default, .slick-footerrow.ui-state-default {
 width: 100%;
 overflow: hidden;
 border-left: 0px !important;
}
.ui-widget {
 font-family: Arial,Helvetica,sans-serif;
 font-size: 1em;
}
.content-section {
 height: 100%;
 width: 100%;
 overflow: hidden;
 position: relative;
}
.main {
 height: 100%;
 width: 100%;
 position: fixed;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}
body {
 font-family: sans-serif, "Lato", Calibri, Arial;
 font-size: 0.8em;
}
html body {
 height: 100%;
 margin: 0;
 padding: 0;
}
.slick-sort-indicator {
 display: inline-block;
 width: 8px;
 height: 5px;
 margin-left: 4px;
 margin-top: 6px;
 float: left;
}
.slick-column-name, .slick-sort-indicator {
 display: inline-block;
 margin-bottom: 100px;
}
.slick-column-name, .slick-sort-indicator {
 margin-bottom: 0px;
}
.slick-header-menubutton {
 position: absolute;
 right: 0px;
 top: 0px;
 bottom: 0px;
 width: 12px;
 cursor: pointer;
 padding-left: 2px;
 display: none;
 border-left: thin ridge silver;
}
.slick-header-down::after {
 font-family: FontAwesome;
 content: "\f0d7";
 font-weight: 900;
 color: black;
}
.slick-resizable-handle {
 position: absolute;
 font-size: 0.1px;
 display: block;
 cursor: col-resize;
 width: 4px;
 right: 0px;
 top: 0px;
 height: 100%;
}

<!DOCTYPE html>
<html class="k-ie k-ie11">
<head>
<title></title>

</head>
<body><div class="main"><div class="content-section" id="content-section"><div class="slickgrid_501462 ui-widget" id="ScClaCategoryGrid" style="outline: 0px; width: 2560px; height: 466px; overflow: hidden; position: relative;"><div class="slick-header ui-state-default" style="overflow: hidden; position: relative;"><div class="slick-header-columns" style="left: -1000px; width: 3560px;" unselectable="on"><div title="" class="ui-state-default slick-header-column header-number slick-header-sortable" id="slickgrid_501462rank" style="width: 116px;"><span class="slick-column-name">RANK</span><span class="slick-sort-indicator"></span><div class="slick-header-menubutton slick-header-down"></div><div class="slick-resizable-handle"></div></div></div></div></div></div></div></body>
</html>

Answer 2

打开slick.grid.css
搜索 .slick-header-column.ui-state-default, .slick-group-header-column.ui-state-default
添加text-align: center;
可选地，添加 background: #color （如果您想更改页眉的背景颜色）

如何在 SlickGrid 中将列 headers 的文本居中？

How to center text of the column headers in SlickGrid?

html

css

slickgrid