How to create responsive tables in ionic 1

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


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

			<td>{{produceData.produceDate |date:'dd/MM/yyyy'}}</td>
			<td>{{produceData.produceId}}</td>
			<td>{{produceData.name.firstName}}</td>
			<td>{{produceData.itemName}}</td>
			<td>{{produceData.productionUnitType}}</td>
			<td>{{produceData.minUnits}}</td>
			<td>{{produceData.maxUnits}}</td>
			<td>{{produceData.productionStartFrom |date:'dd-MM-yyyy'}}</td>
			<td>{{produceData.productionAvailable}}</td>
			<td>{{produceData.lastDateForBid |date:'dd-MM-yyyy'}}</td>
			<td>{{produceData.expectedCost}}</td>
			<td>{{produceData.produceType}}</td>
			<td><button type="button" class="btn btn-primary"
					ng-click="generateBid(produceData)">Click To Bid</button></td>

		</tr>
	</table>
  </div>
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
2

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

<ion-scroll direction="x">
---------table-content--------
</ion-scroll>

https://www.tutorialspoint.com/ionic/ionic_js_scroll.htm

3

thank you for replay…it’s not working

4

watch this codepen maybe this will be helpful

https://codepen.io/anon/pen/WjzWBN

5

it’s will restrict verical scrolling

6

do you want vertical scrolling in your table too.

7

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

8

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

9

height property not working it will automatically stopped…

and check it below link its working or not in ionic
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_table_responsive

10

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>

 <div class="col">
         {{produceData.produceId}}
 </div>

 <div class="col">
       ......
 </div>
</div>
11

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

12

you can use it in also na

13

no.i want to displayed all the columns