Angular html表格边框被破坏答案

【问题标题】：Angular html table borders get ruinedAngular html表格边框被破坏
【发布时间】：2017-01-04 18:04:13
【问题描述】：

我动态生成角度 html 表。实际上，我在页面上生成了几个具有不同列号和大小的表格，并且可扩展的可编辑单元格是必须的。这是我使用的简化模板：

<table>
    <colgroup ng-repeat="col in field.cols track by $index">
      <col width="{{col}}%" />
    </colgroup>
    <thead ng-hide="true"></thead>
    <tbody>
    <tr ng-repeat="row in field.rows track by $index" >
      <td ng-repeat="cell in row track by $index">
          <span class="text-container" ng-show="!cell.isEditing" >{{cell.text}}</span>
          <input type="text" ng-show="cell.isEditing" ng-model="cell.text" ng-blur="cell.isEditing = false" />
      </td>
    </tr>
    </tbody>
  </table>

非常简化的指令是：

app.directive('tableField', function() {
    return {
        templateUrl: 'views/table.html',
        replace: true,
        restrict: 'A',
        scope: {
            field: '='
        },


        link: function($scope, $element, $attr){

            var init = function() {
                $scope.appendRow = function addRow() {
                    var newRow = [];
                    $scope.field.rows[0].forEach(function(col) {
                        newRow.push({'text': 'new'});
                    });
                    $scope.field.rows.push(newRow);
                };
                };
            };
            init();
        }
    };
}]);

这是在编辑或页面方向改变之前的样子：

当我添加新行或编辑单元格并且它们展开或旋转设备时，边框会损坏 - 请参阅图像：

理想情况下，我需要在页面上生成多个具有不同列号和宽度的表格，并带有可编辑的可扩展单元格。我该怎么做才能达到正确的结果？我不知何故需要表格行在任何更改时更新行高。请帮忙。我也找不到一个图书馆来做我需要的一切。

样式表的某些部分：

table {
  width: 100%;
  border: 1px solid #000000;
}

table > tbody > tr > td {
  line-height: 1.42857143;
  border: 1px solid #000000;
}

table .text-container {
  word-wrap: break-word;
  word-break: break-all;
}

剩下的就是颜色和其他不影响表格布局的东西。

【问题讨论】：

你能添加你的样式表吗
我无法添加整个样式表，因为它是一个大项目并且样式表太长。我将删除有关该问题的部分。你不会在表中找到这些类，因为我为了便于阅读而对其进行了简化，但我相信你会在那里看到你想要找到的东西。

标签： angularjs html-table

【解决方案1】：

最后我在 flexbox 上重写了表格。因此，现在它不是<table>，而是一组具有弹性盒样式的<div>s。虽然它看起来不错，而且在所有设备上都可以正常工作。

【讨论】：