Marge entre les lignes dans le datatable

Question

J'ai une application Angular2 utilisant des composants PrimeNg. Plus précisément, un simple datatable comme suit:

<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, mais je voudrais ajouter un peu d'espace/marge entre chacune des lignes. J'ai essayé d'ajouter une marge ou un remplissage à la classe .ui-widget-content, en vain. D'autres modifications apportées à cette classe (et à d'autres) fonctionnent parfaitement, mais je ne trouve aucun élément contrôlant la marge entre les lignes.

Answer 1

Vous pouvez essayer ce qui suit. Enveloppez votre code dans un div comme ceci:

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

et ajoutez le CSS suivant:

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

qui trouve essentiellement un descendant de ce div qui est un élément de table, et change son style border-spacing .