为什么 angularjs 的 transclude 会导致表格中的单元格分离（双边框）？

Question

请参阅下面的指令，该指令将创建一个包含四列的表：

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>',
  }
});

这里是 html（见 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>

两者都在构建同一张表格，但第二张表格由于 transclude 的原因创建了单独的单元格。

所以代替：|名称|1|2|3|
第二个显示：|名称||1||2||3|
在哪里 ||是用相邻单元格的边框绘制的粗边框的文本表示。

这是什么原因？
有什么解决方法？

Answer 1

transclude 'table' 没有border-collapse: collapse，因为它不匹配

table{
    border-collapse: collapse
}

normalize.less中的规则

如果您查看下面的 dom 结构，您就会明白原因。您的 transclude 'table' 实际上被呈现为 table-wrapper 元素而不是表格