title: Angular html table borders get ruined
body: <p>I dynamically generate angular html table. Actually, I generate several tables on page with different column numbers and sizes, and expandable editable cells is a must. Here is a simplified template I use:</p>
  
  <pre><code>&lt;table&gt;
      &lt;colgroup ng-repeat="col in field.cols track by $index"&gt;
        &lt;col width="{{col}}%" /&gt;
      &lt;/colgroup&gt;
      &lt;thead ng-hide="true"&gt;&lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr ng-repeat="row in field.rows track by $index" &gt;
        &lt;td ng-repeat="cell in row track by $index"&gt;
            &lt;span class="text-container" ng-show="!cell.isEditing" &gt;{{cell.text}}&lt;/span&gt;
            &lt;input type="text" ng-show="cell.isEditing" ng-model="cell.text" ng-blur="cell.isEditing = false" /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>and the very simplified directive is:</p>
  
  <pre><code>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();
          }
      };
  }]);
  </code></pre>
  
  <p>this is how it looks before edits or page orientation change:</p>
  
  <p><a href="https://i.stack.imgur.com/a4I1A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a4I1A.png" alt="enter image description here"></a></p>
  
  <p>When I append a new row or edit cells and they expand, or rotate the device, the borders ruin - see the images:</p>
  
  <p><a href="https://i.stack.imgur.com/5QBPs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5QBPs.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/lx8Gw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lx8Gw.png" alt="enter image description here"></a></p>
  
  <p>Ideally I need to generate several tables on page with different column numbers and widths, with editable expandable cells. What shall I do to achieve proper result? I somehow need the table rows to update the row height upon any changes. Please help. I also could not find a library to do all I need.</p>
  
  <p>Some part of the stylesheet:</p>
  
  <pre><code>table {
    width: 100%;
    border: 1px solid #000000;
  }
  
  table &gt; tbody &gt; tr &gt; td {
    line-height: 1.42857143;
    border: 1px solid #000000;
  }
  
  table .text-container {
    word-wrap: break-word;
    word-break: break-all;
  }
  </code></pre>
  
  <p>the rest regards colors and other stuff not influencing the table layout.</p>