Question

我有一张桌子，我希望第一列始终显示在一行上，而另一些则以某种方式将其自身压在一起，剩下的空间。

我试图模拟固定宽度为320（电话尺寸）..

这是我的傻瓜：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="angular.js@*" 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": 2012352432423
  }];


  $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>

Answer 1

嗨，看看这个plunker

https://plnkr.co/edit/cvJruUG5Eh1n2CJQ0KXZ

.fixed_headers {
  width: 750px;
  table-layout: fixed;....

结帐以进一步

使第一列始终固定，其余部分压缩在表

1 个答案: