Haz todo lo posible por interpretar el código bien antes de utilizarlo a tu trabajo si ttienes algo que aportar puedes decirlo en los comentarios.
Solución:
La cuadrícula de flexbox debería hacer lo que quieras. No tiene claro con qué limitación se encontró, por lo que es difícil abordar sus detalles.
Aquí hay un codepen con una muestra de trabajo que genera su tabla con las primeras dos filas y un encabezado: http://codepen.io/anon/pen/pjzKMZ
HTML
Ionic Template
Service Provider Details
Utility Company Name
Service Code
Pay Limit
Account Number to Use
data.name
data.code
LK data.limit
data.account
CSS
body
cursor: url('http://ionicframework.com/img/finger.png'), auto;
.header .col
background-color:lightgrey;
.col
border: solid 1px grey;
border-bottom-style: none;
border-right-style: none;
.col:last-child
border-right: solid 1px grey;
.row:last-child .col
border-bottom: solid 1px grey;
JavaScript
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope)
var ctrl = this;
ctrl.add = add;
ctrl.data = [
name: "AiA",
code: "AI101",
limit: 25000,
account: "Life Insurance"
,
name: "Cargills",
code: "CF001",
limit: 30000,
account: "Food City"
]
////////
function add(index)
window.alert("Added: " + index);
);
Esto probablemente debería ser un comentario, sin embargo, no tengo suficiente reputación para comentar.
Le sugiero que realmente use la tabla (HTML) en lugar de ion-row e ion-col. Las cosas no se verán bien cuando uno de los contenidos de la celda es demasiado largo.
Un caso peor se ve así:
| 10 | 20 | 30 | 40 |
| 1 | 2 | 3100 | 41 |
Bifurcación de ejemplo de mayor fidelidad de @jpoveda
Simplemente, para mí, usé ion-row y ion-col para lograrlo. Puede hacerlo más ordenado haciendo algunos cambios con CSS.
header
header
header
row
02/02/2018
row
row
02/02/2018
row
row
02/02/2018
row
Aquí tienes las reseñas y calificaciones
Recuerda mostrar este enunciado si si solucionó tu problema.