zoukankan      html  css  js  c++  java
  • angularJs表格效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
        <style>
            table {
        border-collapse: collapse;
    }
            
    table,th, td{
        border: 1px solid black;
        }
    
    table 
    {
        100%;
    }
    th
    {
        height:100px;
    }
    
        
        </style>
        
        </head>
    <body>
    
    <div ng-app="myApp" ng-controller="customersCtrl"> 
    
    <table>
      <tr ng-repeat="x in names">
        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
      </tr>
    </table>
    
    </div>
    
    <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("/try/angularjs/data/Customers_JSON.php")
        .then(function (result) {
            $scope.names = result.data.records;
        });
    });
    </script>
    
    </body>
    </html>

    样式调节学习:

    border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

    Width和height属性定义表格的宽度和高度。

    下面的例子是设置100%的宽度,50像素的th元素的高度的表格:

    text-align属性设置水平对齐方式,向左,右,或中心:

  • 相关阅读:
    oracle数据库闪回执行步骤——oracle数据库回退
    10.20总结
    10.11总结
    10.10总结
    10.9总结
    10.8总结
    10.7总结
    10.6总结
    10.5总结
    10.4总结
  • 原文地址:https://www.cnblogs.com/xiufengchen/p/10431103.html
Copyright © 2011-2022 走看看