腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >带间距的角度表

问带间距的角度表
EN

Stack Overflow用户

提问于 2021-03-03 03:58:57

回答 2查看 48关注 0票数 0

下面是我尝试用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>

我希望是这样的

但我最终得到了

html

css

angular

腾讯云域名特惠，新用户首年1元起

腾讯云域名专场特惠：个人新用户.cn仅8.8元/年，企业新用户.com仅1.06元/年...

回答 2

Stack Overflow用户

发布于 2021-03-03 05: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;
}

票数 1

Stack Overflow用户

发布于 2021-03-03 06: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
    }
}