Question

我正在尝试创建一个足球赛程表，其中显示了我所制作的这个plnkr中的团队和持续时间：http://plnkr.co/edit/osuQiVZ2cFKFhbEXylA9?p=preview

我试图让每个团队的td元素（以分钟为单位的游戏持续时间）是总时间（24小时）的宽度百分比 - 同时拥有td元素似乎从与24小时周期相关的适当间隔开始。

我认为我在正确的轨道上通过将持续时间（以分钟为单位）除以一天中的分钟数（1440）来获得宽度％。但是我不知道td％如何将自身调整为父元素？它是tr元素宽度还是表格宽度，td正在自行调整？

正如你在plnkr中看到的那样，我在缩放第二个元素时遇到了麻烦，所以我尝试在第二个内部添加两个span元素，但是你看不到它们的效果不好。

有人可以解释一下我在这个案例中如何能够考虑使用td％吗？

<table class="table table-default">
    <thead>
        <th></th>
        <th>
            <span>00:00</span>
            <span class="pull-right">24:00</span>
        </th>
    </thead>
    <tbody>
        <tr ng-repeat="team in soccerSchedule">
            <td width="100px">
        {{team.team}}
            </td>
            <td class="bg-primary" width="{{widthPercent(secondsToMinutes(team.duration))}}%">
              {{secondsToMinutes(team.duration)}} Minutes Long | Start Time: {{team.startTime}}
            </td>
        </tr>
    </tbody>
</table>

然后我的角度控制器

   angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.soccerSchedule = [
    {team: 'lightning', duration: 18000, startTime:"12:00"}, 
    {team: 'thunder', duration: 18000, startTime:"12:00"},
    {team: 'force', duration: 18000, startTime:"18:00"},
    {team: 'tigers', duration: 18000, startTime:"14:00"},
  ];  

  $scope.widthPercent = function(durationInMinutes){
        return ((durationInMinutes / 1440) * 100);
  };

  $scope.secondsToMinutes = function(seconds){
        return (seconds / 60);
  };

};

Answer 1

问题是表列具有相同的宽度。您不能改变行内单元格的宽度。相反，您可以创建许多表。在这种情况下，我在父表的每一行中放置一个新的1行表，但还有其他方法可以实现它。

Plunker：http://plnkr.co/edit/Cc1an7P3rRteeW1LAxsC?p=preview

   <tr ng-repeat="team in soccerSchedule">
      <td>
        <table>
          <tr>
              <td width="{{100 -  widthPercent(secondsToMinutes(team.duration))}}%">
          {{team.team}}
              </td>
              <td class="bg-primary" width="{{widthPercent(secondsToMinutes(team.duration))}}%">
                {{secondsToMinutes(team.duration)}} Minutes Long | Start Time: {{team.startTime}}
              </td>
            </tr>
          </table>  
        </td>
    </tr>

Answer 2

您尝试实现的目标（不同宽度）违反了呈现数据的表格方式。

这可以通过保持不变的列并在每列中添加额外的div来轻松实现，这将代表您的时间跨度。通过使用ng-style指令，您可以根据计算动态地为其赋予值。

<td>
    <div class="bg-primary" ng-style="{width : ( widthPercent(secondsToMinutes(team.duration)) + '%' ) }">
       {{secondsToMinutes(team.duration)}} Minutes Long | Start Time: {{team.startTime}}
    </div>
</td>

这是一个掠夺者：http://plnkr.co/edit/6bPGrqpsJ13SOHTYWskP?p=preview

我还更改了您的持续时间值，以便您可以看到它正常工作。

表和表头的td宽度百分比表现不正常？

2 个答案: