[英]Remove extra empty space from ngx-datatable header
我正在創建一個 ngx-datatable 但在表的標題處獲得了額外的空間。此外,由於僅此標題,數據行未與標題對齊。這個額外的空間位於表的兩端。
HTML:
<ngx-datatable class='bootstrap' columnMode="force" [headerHeight]="30" [selectionType]="'multiClick'"
[rows]="rows">
<ngx-datatable-column name="UserName" prop = "UserName" headerClass="mydata-table-header">
</ngx-datatable-column>
<ngx-datatable-column name="Date" prop = "Date" headerClass="mydata-table-header" >
</ngx-datatable-column>
<ngx-datatable-column name="Activity" prop="Activity" headerClass="mydata-table-header" ></ngx-datatable-column>
<ngx-datatable-column name="Decision" prop="Activity" headerClass="mydata-table-header" >
</ngx-datatable-column>
<ngx-datatable-column name="Remark" prop="Activity" headerClass="mydata-table-header">
</ngx-datatable-column>
CSS:
.ngx-datatable.bootstrap {
box-shadow: none;
font-size: 13px;
border:none;
border-collapse: collapse;
}
.ngx-datatable.bootstrap .datatable-header {
height: unset !important;
background-color:#28998b;
}
.ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
vertical-align: bottom;
padding: 0.75rem;
border-bottom: 1px solid #000000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
line-height: 24px;
}
.ngx-datatable.bootstrap .datatable-body {
}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row {
vertical-align: top;
border-top: 1px solid #000000;
}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
background-color: rgba(0, 0, 0, 0.05);
}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
text-align: left;
vertical-align: top;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row.active {
background-color: #1483ff;
color: #FFF;
}
你的 css 文件看起來像:
.datatable-header {
height: unset !important;
}
.ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
vertical-align: bottom;
padding: 0.0rem !important;
border-bottom: 1px solid #000000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color:#28998b;
}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
text-align: left;
vertical-align: top;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
您可能需要調整 padding: 0.0rem 中的值。
還要確保您自定義的 css 是 styleUrls 元數據中的最后一行:
styleUrls: [
'../../../node_modules/@swimlane/ngx-datatable/release/themes/bootstrap.css',
'./your.component.css'
]
如果您使用角度(它可以工作,但它是一種 HACK:):
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header,
:host ::ng-deep .datatable-header {
height: 30px !important; // set the height of the header
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell {
font-weight: bold;
padding: 0 0 0 10px !important; // align the header text
}
您可以在 ngx-datatable-column 標簽中嘗試以下屬性:
[width]="150"
[height]="100"
[canAutoResize]="false"
這比使用 css 類更簡單,但您仍然可以創建自己的 css 類,由您決定,希望這對有疑問的人有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.