如何在角度中的列之間添加垂直分隔線

Question

我用角度材料mat-table組件創建了一個簡單的角度表。

默認情況下，行之間有一個分隔符。我想在列之間添加一個垂直分隔符。

任何人都可以告訴我如何添加css屬性來實現列之間的垂直分隔符。

下面顯示的是我的代碼

account.component.html

<mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>

<!-- Table starts here -->


<div class="example-container mat-elevation-z8">

  <mat-table #table [dataSource]="dataSource1">

    <!-- Account No. Column -->
    <ng-container matColumnDef="acc_id">
      <mat-header-cell *matHeaderCellDef> Account ID. </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell>
    </ng-container>

      <!-- Account Description Column -->
    <ng-container matColumnDef="acc_desc">
      <mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.acc_desc}}</mat-cell>
       </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns1;"> </mat-row>
  </mat-table>


  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>
</div>

account.component.scss

.example-container {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  font-family: Verdana,Sans-Serif;
}

mat-table{
  text-align:center;
  font-size:12px;
  font-family: Verdana,Sans-Serif;
}

mat-cell{
  font-size:12px;
  font-family: Verdana,Sans-Serif;
  }

 mat-option{
  font-size:12px;
  font-family: Verdana,Sans-Serif;
  margin:-5px 0 -5px 0;
}

account.component.ts

import {Component, ViewChild, Inject, OnInit} from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {MatPaginator, MatTableDataSource} from '@angular/material';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss']
   })


export class AccountComponent implements OnInit {

acc_desc: any;

constructor() { }


  /* Table Starts here
  ---------------------- */

 displayedColumns1 = ['acc_id', 'acc_desc'];
 dataSource1= new MatTableDataSource<Element>(ELEMENT_DATA);

ngOnInit(){
   const data = [
      {
        "acc_id": 1001,
        "acc_desc": "Administration"
      },

      {
        "acc_id": 1002,
        "acc_desc": "Laboratory"
      },

      {
        "acc_id": 1003,
        "acc_desc": "Staff"
      },

      {
        "acc_id": 1004,
        "acc_desc": "Office-1"
      },
      {
        "acc_id": 1005,
        "acc_desc": "Office-2"
      },
      {
        "acc_id": 1006,
        "acc_desc": "Office-2"
      }
   ];
     this.acc_desc = data;
     this.dataSource1.data = (data as Element[]);
  }

  @ViewChild(MatPaginator) paginator: MatPaginator;

   ngAfterViewInit() {
    this.dataSource1.paginator = this.paginator;
  } }

  export interface Element {
   acc_id: any;
   acc_desc: any; 
  }

const ELEMENT_DATA: Element[] = [];

Answer 1

試試這個.mat-cell類而不是你的

.mat-cell{
  font-size:12px;
  font-family: Verdana,Sans-Serif;
  display: table-cell;
  height: 48px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-left: 2px solid rgba(0, 0, 0, 0.12);
  border-right: 2px solid rgba(0, 0, 0, 0.12);
  }

更多細節，請檢查此討論： Angular4 Material md-table列寬度自動調整大小與普通表一樣