0

我有一个使用 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课程中添加边距或填充，但无济于事。对这个类（和其他类）的其他更改工作完美，但我找不到控制行之间边距的任何元素。

4

1 回答 1

0

您可以尝试以下方法。将您的代码包装在这样的 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 的任何后代，它是一个表格元素，并改变了它的边框间距样式。

于 2017-08-28T12:36:22.587 回答