Grid with borders

[blondie63]

I’m using last Ionic 4 & angular 8
I’ve a very simple grid and i’d like to have borders like an excel for grid, rows 6 cols like this:

This is my code:

<ion-content padding class="tab5-content">
  <ion-grid>
    <ion-row *ngFor="let item of data; index as i">
      <ion-col col-auto> {{ item.field1 }}</ion-col>
      <ion-col text-right> {{ item.field2 }}</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

I’ve trid with css but i’ve no found a solution
On Ionic Docs i’ve no found this very basic info

Some help ?

[aaronksaunders]

probably a cleaner way…

.cell-class {
  border-color: black; 
  border-width: .01em; 
  border-style:solid; margin-bottom : -1px;
  background-color: lightgrey
}

<ion-content>
	<ion-content padding class="tab5-content">
		<ion-grid style="">
			<ion-row *ngFor="let item of data; index as i" >
				<ion-col col-auto class="cell-class"> {{ item.field1 }}</ion-col>
				<ion-col text-right  class="cell-class" style="margin-left : -1px">
           {{ item.field2 }}
        </ion-col>
			</ion-row>
		</ion-grid>
	</ion-content>
</ion-content>

[gokujy]

Hello Here working example:

page.ts

  public data = [
    {
      field1: "test1",
      field2: "test2"
    },
    {
      field1: "test1",
      field2: "test2"
    }, {
      field1: "test1",
      field2: "test2"
    }
    , {
      field1: "test1",
      field2: "test2"
    },
    {
      field1: "test1",
      field2: "test2"
    }
  ];

page.html

  <ion-grid>
    <ion-row>
      <ion-col class="bgcolor" size="6" text-center><b>A</b></ion-col>
      <ion-col class="bgcolor" size="6" text-center><b>B</b></ion-col>
    </ion-row>
    <ion-row *ngFor="let item of data; index as i">
      <ion-col size="6" text-center> {{ item.field1 }}</ion-col>
      <ion-col size="6" text-center> {{ item.field2 }}</ion-col>
    </ion-row>
  </ion-grid>

page.scss

.bgcolor {
  background: #cdcfd6;
}

ion-col {
  border: 2px solid #aeb7ca;
}

Output:

Hope this help you