각형 HTML 표 테두리가 망가졌습니다.

동적으로 각 HTML 표를 생성합니다. 사실, 다른 열 번호와 크기를 가진 페이지에서 여러 테이블을 생성하고 확장 가능한 편집 가능한 셀은 필수 요소입니다. 저는 여기에 단순화 된 템플릿을 사용한다 :각형 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; 
}

나머지는 색상과 테이블 레이아웃에 영향을 미치는되지 않은 다른 물건을 간주한다.

출처

2016-06-22 Peter Babukh

스타일 시트를 추가 할 수 있습니까 –

큰 프로젝트이고 스타일 시트가 너무 길어서 전체 스타일 시트를 추가 할 수 없습니다. 나는이 문제와 관련된 부분을 잘라 낼 것이다. 가독성을 위해 클래스를 단순화 했으므로이 클래스를 테이블에서 찾을 수는 없지만 거기에서 찾으려는 것이 표시됩니다. –

마지막으로 나는 flexboxes에 테이블을 다시 작성 결국. 따라서 지금은 <table>이 아니며 플렉스 박스 스타일을 사용하는 <div> 세트입니다. 멋지게 보이지만 모든 장치에서 더 잘 작동합니다.

출처

2017-01-04 10:04:13

각형 HTML 표 테두리가 망가졌습니다.

답변

관련 문제