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

数据表中行之间的边距

1 个答案: