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已被访问但在桌面上根本不起作用。

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 =＆＃34; col-button＆＃34;是的，所以我可能错了，但是查看文档我不认为它会把这个课程放在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＆＃39;你附上了班级名称＆＃39; demo＆＃39;它。

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

如果您将以下css样式写入＆＃39; foo.component.css＆＃39;文件，它应该将文本对齐到中心。

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

无法使用PrimeNg DataTable对齐中心文本

2 个答案: