0
私は角のある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;
}
残りは色やテーブルのレイアウトに影響を与えない他のものを考えています。
あなたのスタイルシートを追加できます –
大きなプロジェクトでスタイルシートが長すぎるため、スタイルシート全体を追加できません。私はその問題に関する部分を切り捨てます。私は読みやすさのために単純化しているので、これらのクラスはテーブルにはありませんが、あなたがそこで見つけたいものを見ることができます。 –