Margin between rows in datatable

Question

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.

Answer 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.