数据表中行之间的边距

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>

到目前为止一切顺利，但我想在每一行之间添加一些 space/margin。我试过向 .ui-widget-content class 添加边距或填充，但无济于事。对此 class（和其他）的其他更改工作得很好，但我找不到任何元素控制行之间的边距。

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 的任何后代 table 元素，并更改其边框间距样式。

数据表中行之间的边距

Margin between rows in datatable

css

angular

primeng

primeng-datatable