Grid Issue with More Columns - How to Solve?

[Kannan]

Hi,

I drawn a table using Grid with More Columns.

Merge all coumns in mobile view.

But, The View is ok in Ipad only Not in Mobile Devices.

Also need a border for this columns.

Is there Any solution for this issue??

Scroll Horizontal option is there for this.

                            <Grid ColumnCount="9" Padding="10,0,10,0" Margin="0,0,0,20">
                                <TableHeader>Session Name</TableHeader>
                                <TableHeader>Session Duration</TableHeader>
                                <TableHeader>Performance</TableHeader>
                                <TableHeader>Work</TableHeader>
                                <TableHeader>Stamina</TableHeader>
                                <TableHeader>Max. HR</TableHeader>
                                <TableHeader>Avg. HR</TableHeader>
                                <TableHeader>Max. BR</TableHeader>
                                <TableHeader>Avg. BR</TableHeader>

                                <Value>abc</Value>
                                <Value>15 mins </Value>
                                <Value>50%</Value>
                                <Value>40%</Value>
                                <Value>60%</Value>
                                <Value>90 bpm</Value>
                                <Value>84 bpm</Value>
                                <Value>30 bpm</Value>
                                <Value>20 bpm</Value>

                                <Value>abc</Value>
                                <Value>15 mins </Value>
                                <Value>50%</Value>
                                <Value>40%</Value>
                                <Value>60%</Value>
                                <Value>90 bpm</Value>
                                <Value>84 bpm</Value>
                                <Value>30 bpm</Value>
                                <Value>20 bpm</Value>

                                <Value>abc</Value>
                                <Value>15 mins </Value>
                                <Value>50%</Value>
                                <Value>40%</Value>
                                <Value>60%</Value>
                                <Value>90 bpm</Value>
                                <Value>84 bpm</Value>
                                <Value>30 bpm</Value>
                                <Value>20 bpm</Value>

                                <Value>abc</Value>
                                <Value>15 mins </Value>
                                <Value>50%</Value>
                                <Value>40%</Value>
                                <Value>60%</Value>
                                <Value>90 bpm</Value>
                                <Value>84 bpm</Value>
                                <Value>30 bpm</Value>
                                <Value>20 bpm</Value>
                            </Grid>

Thank You

[Vegard_Strand_Lende]

Try this

<ScrollView AllowedScrollDirections="Horizontal">
    <StackPanel Orientation="Horizontal">
        <Grid ColumnData="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" Padding="10,0,10,0" Margin="0,0,0,20">
            <!-- content -->
        </Grid>
    </StackPanel>
</ScrollView>