无法使用 PrimeNg DataTable 将文本居中对齐

Question

我正在尝试同时使用 PrimeNg 和 bootstrap。也许这本质上是不好的？似乎仅靠 PrimeNg 是不够的。

我正在尝试让一个按钮居中显示在他们的文档中：https://www.primefaces.org/primeng/#/datatable/templating 然而对我来说，它总是左对齐。

index.html

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/primeng/resources/themes/bootstrap/theme.css">
<link rel="stylesheet" href="/node_modules/primeng/resources/primeng.min.css" />

foo.component.html

  <p-dataTable [value]="mixData" [editable]="true" sortField="mixType" id="MixTypeTable">

        <p-column id="deleteColumn" styleClass="col-button">
            <ng-template let-row="rowData" pTemplate="body" >
                <a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
            </ng-template>
        </p-column>

    </p-dataTable>

foo.component.ts

@Component({
    selector: 'qtyPane',
    templateUrl: './app/register/foo.component.html',
    styleUrls: ['./app/register/foo.component.css'],
    providers: []
})

在我的 foo.component.css 中，带有按钮的 td 选择器似乎没有任何效果。其他样式适用于 foo.component.html 中的其他元素，所以我知道 css 已达到但在 table.

上根本不起作用

foo.component.css，这些我都试过了：

#deleteColumn td {
    text-align: center;
}


table > tbody > td.col-button {
    text-align: center;
}

.col-button {
    width: 10%;
    text-align: center;
}

td.col-button {
    text-align: center;
}

Answer 1

我不确定 styleClass="col-button" 的作用，所以我可能是错的，但查看文档我认为它不会将 class 放在 td 上。

这是我首先尝试的方法：

<p-column id="deleteColumn" styleClass="col-button">
     <ng-template let-row="rowData" pTemplate="body" >
         <div class="my-center-text">
            <a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
         </div>
     </ng-template>
</p-column>

CSS:

.my-center-text {
    text-align: center;
    width: 100%;
}

如果这不起作用，您可能需要进行某种深度选择。我知道 Angular 处于不断变化的状态，但现在这样的事情可能会起作用：

#deleteColumn /deep/ td {
   text-align: center;
}

因为Angular 防止一个组件中的样式影响另一个组件，默认情况下您无法直接访问 p 组件内的 td。通过将 /deep/ 添加到选择器路径，它也会将样式应用于嵌套组件

Answer 2

如果您以托管元素上下文为目标，它应该也能工作。假设您的数据表由标签 'app-datatabledemo' 托管并且您将 class 名称 'demo' 附加到它。

<app-datatabledemo class="demo"></app-datatabledemo>

如果您将以下 css 样式写入 'foo.component.css' 文件，它应该将文本居中对齐。

:host-context(.demo) >>> .ui-datatable-data{
    text-align: center;
}

无法使用 PrimeNg DataTable 将文本居中对齐

Unable to text-align center with PrimeNg DataTable

css

twitter-bootstrap

angular

primeng

primeng-datatable