Удалите лишнее пустое пространство из заголовка ngx-datatable

Я создаю 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;
}

angular html css ngx-datatable
person Nishant Varshney    schedule 28.02.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Ваш файл 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'
]
person Euclides    schedule 04.03.2018
comment
Это не работает, у меня такая же проблема, пожалуйста, помогите с этим. - person Tarek; 21.01.2019
comment
@ Тарек, какая у тебя проблема? - person Euclides; 21.01.2019

arrow_upward
0
arrow_downward

Если вы используете angular (он работает, но это своего рода ХАК!):

: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
}
person Rammgarot    schedule 21.03.2019

arrow_upward
0
arrow_downward

Вы можете попробовать следующие свойства в теге ngx-datatable-column:

[width]="150"
[height]="100"
[canAutoResize]="false"

Это проще, чем использовать классы css, но вы все равно можете создать свой класс css, на ваше усмотрение, надеюсь, это поможет тем, кто сомневается.

person Anuska Kepler    schedule 28.10.2020