表格和表格标题的 td 宽度百分比行为不正确？

Question

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

我正在努力使每个团队的 td 元素（以分钟为单位的比赛持续时间）是总时间（24 小时周期）的宽度百分比——同时出现 td 元素以与 24 小时周期相关的适当间隔开始。

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

正如您在 plnkr 中看到的那样，我在缩放 th 元素时遇到了问题，因此我尝试在 2nd th 内添加两个 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

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