table 和 table header 的 td 宽度百分比表现不正确？

Question

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

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

我认为我在正确的轨道上通过将以分钟为单位的持续时间除以一天中的分钟数 (1440) 来获得 width%。但是我不知道 td% 如何根据 parent 元素进行自我调整？是 tr 元素宽度还是 td 调整自身的 table 宽度？

如您在 plnkr 中所见，我在缩放第 th 个元素时遇到问题，因此我尝试在第 2 个元素中添加两个 span 元素，但如您所见，效果不佳。

在这种情况下，谁能解释我如何考虑在 table 元素内使用 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 控制器

   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

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

笨蛋：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

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

table 和 table header 的 td 宽度百分比表现不正确？

td width percentage of table and table header not behaving correctly?

html

css

html-table

width

angularjs