数据表中行之间的边距

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 的任何后代是一个表格元素，并改变了它的边框间距样式。