如何在角之间的列之间添加垂直分隔线 [英] how to add a vertical divider between columns in angular

问题描述

我已经使用角材料垫表组件创建了一个简单的角表.

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.

谁能告诉我如何添加css属性以实现列之间的垂直分隔符.

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

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[] = [];

推荐答案

尝试使用此.mat-cell类，而不是您的

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

更多详细信息，请查看以下讨论: Angular4像正常表一样自动调整材料md表的列宽

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

这篇关于如何在角之间的列之间添加垂直分隔线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！