データテーブル内の行間のマージン

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要素であるこのdiv要素の任意の子孫を見つけ、その境界線間隔のスタイルを変更し

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

。