Pourquoi la transclusion d'angularjs provoque-t-elle la séparation des cellules (doubles bordures) dans une table?

Question

Voir directive ci-dessous qui va créer une table avec quatre colonnes:

app.directive('tableWrapper',function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    template: '<table><ng-transclude></ng-transclude></table>', 
    } 
}); 

app.directive('myCells',function() { 
    return { 
    restrict: 'E', 
    template: '<tr><td>Name</td><td ng-repeat="c in [1,2,3]">{{c}}</td></tr>', 
    } 
}); 

Voici html (voir plunker: http://plnkr.co/edit/ZTrSifnYWKaNy9XQzfGL)

<table><tr><td>Name</td><td ng-repeat="c in [1,2,3]">{{c}}</td></tr></table> 
<hr/> 
<table-wrapper><my-cells></my-cells></table-wrapper> 

Les deux sont la construction d'une même table, mais le second, en raison de transclude, crée des cellules séparées.

Donc, au lieu de: | Nom | 1 | 2 | 3 |
La seconde affiche: | Nom || 1 || 2 || 3 |
Où || est une représentation textuelle d'une bordure épaisse dessinée avec des bordures de cellules adjacentes.

Pour quelle raison?
Quelle pourrait être la solution de contournement?

Answer 1

Le transclude « table » n'a pas border-collapse: collapse parce qu'il ne correspond pas à la

table{ 
    border-collapse: collapse 
} 

règle normalize.less

Si vous regardez la structure de dom ci-dessous vous pouvez voir pourquoi. Votre transclude 'table' est effectivement rendu comme un élément table-wrapper au lieu d'une table