带间距的角度表
带间距的角度表
提问于 2021-03-03 11:58:57
下面是我尝试用Angular编写的代码示例，但这不是我想要的东西。
<table>
<th >No.</th>
<th >Merchant </th>
<th >Last Order Grand Total </th>
<th >Last Order Date </th>
<hr>
<tr *ngFor="let item of topFiveActiveMerchant; index as i;">
<td>{{i+1}}</td>
<td>{{item.merchant_name}}</td>
<td>{{item.merchant_name}}</td>
<td>{{item.created_date | date:'dd/MM/yyyy h:mm a'}}</td>
</tr>
</table>我希望是这样的
但我最终得到了
回答 2
Stack Overflow用户
发布于 2021-03-03 13:56:13
如果你想使用简单的表格，我有一个解决方案。但是，我认为您可以检查mat-table (Documentation)。这很简单，而且mat-table中有很多可用的功能。现在，这是我的简单表below=> (Full Demo Code Available in Stackblitz)代码。
HTML：
<table class="my-table">
<thead class="my-table headers">
<tr>
<th *ngFor="let column of config">{{column.header}}</th>
</tr>
</thead>
<tbody class="my-table body">
<tr my-active *ngFor="let row of data.data; index as rowIndex">
<td (click)="onSelect(rowIndex)" *ngFor="let column of config; index as i" [ngClass]="{last: i === (config.length - 1) }">{{row[column.value]}}</td>
</tr>
</tbody>
</table>TS:
import {Component, OnInit, ViewChild} from '@angular/core';
export const configColumns = [{
header: "Name",
value: "name"
}, {
header: "E-mail",
value: "email"
}, {
header: "Phone",
value: "phone"
}];
export const data = [{
name: "John Doe 1",
email: "johndoe_one@email.com",
phone: "900001111"
}, {
name: "John Doe 2",
email: "johndoe_two@email.com",
phone: "900002222"
}, {
name: "John Doe 3",
email: "johndoe_three@email.com",
phone: "900003333"
}];
@Component({
selector: 'table-sorting-example',
styleUrls: ['table-sorting-example.css'],
templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements OnInit {
data:any;
config:any;
ngOnInit() {
this.config=configColumns;
this.data=data;
}
}CSS:
table.my-table {
border-collapse: collapse;
width: 100%;
text-align: center;
}
thead.my-table.headers tr th {
border: black solid 1px;
background-color: darkblue;
color: white;
height: 25px;
}
tbody.my-table.body tr td {
border: black solid 1px;
height: 25px;
}
tbody.my-table.body tr.active {
background-color: gainsboro;
cursor: pointer;
}
div.pag-space {
margin-top: 10px;
display: flex;
justify-content: space-around;
}
button.pag-button {
width: 50px;
height: 20px;
cursor: pointer;
}
select.size-page {
width: 100px;
text-align-last: center;
cursor: pointer;
}Stack Overflow用户
发布于 2021-03-03 14:07:10
如果您熟悉Angular Material或Bootstrap，则可以使用这些表。如果你想构建自定义表格，那么你需要样式化表格中的每个元素。
要在Table Header和Table Description中设置每一列的样式，可以使用以下css设置样式。
在您的component.html模板中。将class添加到表中。
<table class="custom-table">在您的component.css或component.scss中
.custom-table {
border-collapse: collapse;
}
.custom-table th,
.custom-table td {
padding: 10px;
// other css
}单独的标题样式
.custom-table th {
padding: 10px;
// other css
}单独的列样式
.custom-table td {
padding: 10px;
// other css
}若要指定列宽，请执行以下操作。
<th style="width: 200px">Merchant</th>其他风格
<th style="width: 200px; text-align: center">Merchant</th>列描述也是如此。
<td style="text-align: center">{{item.merchant_name}}</td>列描述中的样式设置
<td style="text-align: center">
<div class="name">{{item.merchant_name}}</div>
<div class="desg">{{item.merchant_desg}}</div>
</td>遵循angular component-styles的样式指南
::ng-deep .custom-table .name {
font-weight: bold;
font-size: 18px;
// other styles
}
::ng-deep .custom-table .desg {
font-size: 12px;
// other styles
}使用SCSS
::ng-deep .custom-table {
.name {
font-weight: bold;
font-size: 18px;
// other styles
}
.desg {
font-size: 12px;
// other styles
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66450581
复制相关文章
相似问题
腾讯云开发者
