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

Question

我正在尝试创建一个足球时间表来显示球队和持续时间，就像我制作的这个 plnkr:http://plnkr.co/edit/osuQiVZ2cFKFhbEXylA9?p=preview

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

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

正如您在 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 Controller

   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

您试图实现的目标(不同的宽度)与呈现数据的表格方式背道而驰。

这可以通过保持列不变并在每列内添加一个额外的 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

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