将输出结果拆分为 html 中同一表格的两个水平部分答案

【问题标题】：Split output results into two horizontal sections of same table in html将输出结果拆分为 html 中同一表格的两个水平部分
【发布时间】：2018-02-26 03:39:57
【问题描述】：

我想以这样一种方式拆分特定结果的输出，使其适合浏览器宽度，水平分成两个部分。我将从服务中获得的行数是动态的。所以无法修复。此外，我不想将记录视为一个部分中的一半，并在另一个表中对另一部分进行硬编码。有没有什么方法可以通过表格属性、css或者其他方式来完成。

为了更好地表达我的意思，我附上了我的意思的截图。目前我正在使用 Angular js 1.1。结果在 Angular js 中并不是特别预期的。任何解决方案都可以。请找到我期望的示例输出：

如果需要更多详细信息，请告诉我。

【问题讨论】：

你的输出是什么样的

标签： javascript html css angularjs html-table

【解决方案1】：

我认为在这种情况下，使用输入参数创建自定义指令会很舒服：items - 所有输入项和size - 左表的行数。

angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
    $scope.items = [];
    for(var i = 0; i < 10; i++)
      $scope.items.push({head1:i, head2:i, head3:i});
    $scope.size = 6;
}])
.directive('tables', function(){
  return{
    restrict: 'E',
    scope: {
        size: '=',
        items: '='
    },
    controller: function($scope){
      $scope.$watch('size', function(){
        $scope.tables = [
            $scope.items.slice(0, $scope.size),
            $scope.items.slice($scope.size, $scope.items.length)
        ];
      });
    },
    template: `
      <table ng-repeat='table in tables' style='float:left'>
        <thead>
          <tr>
            <th ng-repeat='head in [1,2,3]'>Head {{head}}</th>            
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat='item in table'>
            <td ng-repeat='(key, value) in item'>{{value}}</td>            
          </tr>
        </tbody>
      </table>`
  }
})

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller="ctrl">
    <div>
         size: <input type='text' ng-model='size'/>
    </div>
    <tables items='items' size='size'/>
</div>

【讨论】：