Forum : Espace dans <td> avec AngularJs

Bonjour, tout le monde :p

Voila je rencontre un petit problème avec mon code contenant du code AngularJs , Html, Css.

Ce que je fais

Voilà, pour un projet personnel j'ai créé une vue à partir d'un fichier Json.

Voici son rendu :

url = http://www.noelshack.com/2016-14-1460156379-types.png

Voici le code que j'ai écris en Html / AngularJs :

<body> <div class="container"> <div class="row header" style="text-align:center;color:black"> <h3>List of Types.</h3> </div> <table class="table table-striped"> <tr> <td><b>Id</b></td> <td><b>Type</b></td> <td><b>Weaknesses</b></td> </tr> <tr ng-repeat="type in types"> <td >{{type.id}}</td> <td><svg title="{{type.name}}" ng-include="getLogos(type.id)"></svg></td> <td><svg ng-repeat="weakness in type.weaknesses" title="{{types[weakness].name}}" ng-include="getLogos(weakness)"></svg></td> </tr> </table> </div> </body>

Et le code côté Js :

angular.module('myApp.tableOfTypes', ['ngRoute']) .config(['$routeProvider' , function($routeProvider) { $routeProvider.when('/tableOfTypes', { templateUrl: 'tableOfTypes/tableOfTypes.html', controller: 'typesController' }); }]) .controller('typesController', [ '$scope','$http', function($scope, $http) { $http.get('resources/Types.json').success(function(data) { $scope.types = data.Types; }); $scope.getLogos = function ($weakness) { var logo_path = 'resources/logo/' + $weakness +'_32x32.svg'; return logo_path; } }]);

Ce que je veux

Ce que j'aimerais obtenir c'est une mise en forme plus jolie .

J'essaye depuis une journée de réduire l'espace entre chaques images dans a colonne weaknesses, mais quoique je fasse rien ne fonctionne.

J'aimerais aussi , réduire l'espace entre chaques lignes, qui est presque égal à la hauteur du svg.

Voilà voilà,

Je vous remercie d'avance ! :)
Et encore merci de vos tutos !

Espace dans <td> avec AngularJs

Ce que je fais

Ce que je veux

2 réponses