0

I have an Angular2 app using PrimeNg components. Specifically, a simple datatable as follows:

<p-dataTable selectionMode="single" [value]="data" [(selection)]="selected" (onRowSelect)="handleRowSelect($event)">
  <p-column [style]="{width: '15rem'}" field="name" header="Name">    </p-column>
  <p-column [style]="{width: '15rem'}" field="color" header="Color"></p-column>
  <p-column [style]="{width: '30rem'}" field="comments" header="Comments"></p-column>
</p-dataTable>

So far so good but I would like to add some space/margin between each of the rows. I've tried adding margin or padding to the .ui-widget-content class, to no avail. Other changes to this class (and others) work perfectly, but I can't find whatever element controls the margin between rows.

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
pillbwill
  • 3
  • 1
  • 6

1 Answers1

1

You can try the following. Wrap your code inside a div like this : 

<div class="table-with-margin">
  <p-dataTable selectionMode="single" [value]="data" [(selection)]="selected" (onRowSelect)="handleRowSelect($event)">
    <p-column [style]="{width: '15rem'}" field="name" header="Name">    </p-column>
    <p-column [style]="{width: '15rem'}" field="color" header="Color"></p-column>
    <p-column [style]="{width: '30rem'}" field="comments" header="Comments"></p-column>
  </p-dataTable>
</div>

and add the following CSS :

.table-with-margin table {
    border-spacing: 0 1em !important;
    border-collapse: separate;
}

Which basically finds any descendant of this div that is a table element, and changes its border-spacing style.

ktsangop
  • 1,013
  • 2
  • 16
  • 29
  • u cant give the tr border if u used this solution i need another solution to use the border and the margin both of them together :( – Un1xCr3w Jun 06 '20 at 05:15