html5 离子,html5 – 在离子中创建一个表

flexbox网格应该做你想要的。你不清楚你遇到的限制，所以很难解决你的具体情况。

这是一个代码工具，其中包含一个工作示例，可以使用前几行和标题生成表：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}}

Add

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

}

});