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

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.

1 Like

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:

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

      <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>

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.

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

so this make the grid system to 10 col?

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

not really , thanks for help.