Hi All,
Any idea about how to merge the “Header 2. Merge me!” cells? ( check StackBlitz demo ). Thanks in advance!
Output:
Code:
<ion-grid>
<ion-row>
<ion-col size="6" offset="6" class="header">
Header 1
</ion-col>
</ion-row>
<ion-row>
<ion-col offset="6" size="3" class="subheader" >
Subheader 1.A
</ion-col>
<ion-col size="3" class="subheader">
Subheader 1.B
</ion-col>
</ion-row>
<ion-row>
<ion-col size="3" class="header">
Header 2. Merge me!
</ion-col>
<ion-col size="3" class="subheader">
Subheader 2.A
</ion-col>
<ion-col size="3">
w
</ion-col>
<ion-col size="3" >
x
</ion-col>
</ion-row>
<ion-row>
<ion-col size="3" class="header">
Header 2. Merge me!
</ion-col>
<ion-col size="3" class="subheader">
Subheader 2.B
</ion-col>
<ion-col size="3" >
y
</ion-col>
<ion-col size="3">
Z
</ion-col>
</ion-row>
</ion-grid>
ion-grid{
max-width: 400px;
}
ion-col {
padding: 0;
border: solid 1px #ddd;
text-align: center;
}
ion-col > div{
vertical-align: middle;
}
ion-row {
justify-content: center;
padding: 0;
margin: 0;
}
.header{
background-color: #f7f7f7;
}
.subheader{
font-weight: bold;
}