How to create responsive tables in ionic 1


I am creating on mobile application. that mobile application contains 12 columns. mobile display fit only five columns. so i need to create responsive table. but it’s not working.

The table code is:


		<tr	ng-repeat="produceData in produceList">

			<td>{{produceData.produceDate |date:'dd/MM/yyyy'}}</td>
			<td>{{produceData.productionStartFrom |date:'dd-MM-yyyy'}}</td>
			<td>{{produceData.lastDateForBid |date:'dd-MM-yyyy'}}</td>
			<td><button type="button" class="btn btn-primary"
					ng-click="generateBid(produceData)">Click To Bid</button></td>

Produce Date Production Id Name Item Name Unit Type Min Unit Max Unit Production Start Date Available Frequency Last Date for Bid Price
per Unit
Produce Type Bid


create your table in ion-scroll directive and enable horizontal scroll.

<ion-scroll direction="x">


thank you for replay…it’s not working


watch this codepen maybe this will be helpful


it’s will restrict verical scrolling


do you want vertical scrolling in your table too.


yes both is required the table contains 12 columns and 50 rows


i have edited the codepen it is now scrolling in both directions. have a look


height property not working it will automatically stopped…

and check it below link its working or not in ionic


you can try this following format…I hope it will be helpful to you

<div class="row" ng-repeate="produceData in produceList">

 <div class="col">
      {{produceData.produceDate |date:'dd/MM/yyyy'}}

 <div class="col">

 <div class="col">


it will not fit properly on table.only displayed 6 columns


you can use it in also na


no.i want to displayed all the columns