如何在角度中的列之间添加垂直分隔线

Question

I have created a simple table in angular using angular material mat-table component.

The rows by default have a divider between them.I want add a vertical divider between the columns.

Can anybody tell me how add the css property to implement the vertical divider between the columns.

Below shown is my code

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

try this .mat-cell class instead of yours

.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);
  }

More details, Please check this discussion: Angular4 Material md-table Column Width AutoSizing Like Normal Table