In ion-grid when I create table how could the 2nd row 's col can match each col's width in the 1st row?

Ionic Framework ionic-v3
1

Hi there, I have a question about ion grid, recently I’m using ion-grid to create tables.
but I found when some cels show more content can makes the cell width not same as the table header. so how could I solve this kind of problem.
ThanksCapture

1 Like
2

The ion-grid system is based on a bootstrap flexbox grid, and they should be the same width if you specify their width as a fraction of 12. You can read about bootstrap flex grids here: https://v4-alpha.getbootstrap.com/layout/grid/

So your grid as 6 columns and to have them all lock to equal widths you would have:

<ion-grid>
   <ion-row>
      <ion-col col-2>Column 1</ion-col col-2>
      <ion-col col-2>Column 2</ion-col col-2>
      <ion-col col-2>Column 3</ion-col col-2>
      <ion-col col-2>Column 4</ion-col col-2>
      <ion-col col-2>Column 5</ion-col col-2>
      <ion-col col-2>Column 6</ion-col col-2>
   </ion-row>
</ion-grid>
3

Hi Evan,
Thanks for rely, but my request can not be every cells give 2 for each col. that’s why I ask this question.
Thanks

4

Just assign the grid a certain class and set the $grid-columns: 10; in scss

5

so this make the grid system to 10 col?

6

If you want to do it across your entire app just open variables.scss and type on any line $grid-columns:10;

7

not really , thanks for help.