1
我有一張桌子，我想要顯示第一列總是在一行，其他的人以某種方式將自己壓在一起，其餘的空間。使第一列始終固定，其餘壓縮在表
我試圖模擬在320固定的寬度（手機大小）..
這裏是我的plunker：http://plnkr.co/edit/I5Qe21mgGGpMV94bdMl6?p=preview
下面你可以看到所有的代碼，並用它的CSS ..
<!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>