數據表中的行之間的邊距

Question

我有一個使用PrimeNg組件的Angular2應用程序。具體來說，一個簡單的數據表如下：

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

到目前爲止很好，但我想在每個行之間添加一些空間/餘量。我已經嘗試在.ui-widget-content課程中添加邊距或填充，但無濟於事。對這個類（和其他類）的其他更改完美地工作，但我找不到任何元素控制行之間的邊距。

Answer 1

您可以嘗試以下操作。包裝你的代碼一個div裏面是這樣的：

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

，並添加以下CSS：

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

這基本上找到這個div是一個表元素的任何後代，並改變它的邊框間距風格。