1
Ich habe eine Tabelle, wo ich die erste Spalte immer auf eine Zeile anzeigen und die anderen sich irgendwie zusammen den Rest des Raumes drücken müssen.machen erste Spalte immer behoben und den Rest in Tabelle komprimiert
Ich habe versucht, eine feste Breite bei 320 (für die Telefongröße) zu simulieren ..
Hier ist mein Plunker: http://plnkr.co/edit/I5Qe21mgGGpMV94bdMl6?p=preview
Weiter unten finden Sie alle .. den Code und die CSS damit
sehen<!doctype html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/slate/bootstrap.min.css" />
<script data-require="[email protected]*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<table border="1" style="width: 320px;" class="table table-striped table-hover table-responsive table-bordered">
<thead style="font-weight: bold;">
<tr>
<th ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest" ng-if="column.checked">
<span class="glyphicon glyphicon-circle-arrow-right" ng-show="column.id === 'Value1'"></span>
{{row[column.id]}}
</td>
</tr>
</tbody>
</table>
<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.id}}
</div>
</div>
<style>
table {
table-layout: fixed;
width: 100%;
font-size: 10px;
}
td {
word-wrap: break-word;
}
</style>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.columnsTest = [{
id: 'Value1',
checked: true
}, {
id: 'Value2',
checked: true
}, {
id: 'Value3',
checked: true
}];
$scope.rows = [{
id: 1,
"Value1": 'Thisshouldbeonerow',
"Value2": 2013321,
"Value3": 2
}];
$scope.columnToggled = function(column) {
$('[data-col-id="' + column.id + '"]').each(function() {
var element = this;
if ($(element).hasClass('ng-hide')) {
$(element).removeClass('ng-hide');
} else {
$(element).addClass('ng-hide');
}
});
};
function updateRow(row) {
for (var i = 0; i < $scope.rows.length; i++) {
if ($scope.rows[i].id === row.id) {
$scope.rows[i] = row;
}
}
}
});
</script>
</body>
</html>