单元格边框宽度自动随内容增加

Question

我正在使用bootstrap和angular制作页面。通过BS修复我的布局，现在正在处理角度。在尝试通过ng-repeat重复图像时，我遇到了这个单元格边界问题而不知道该怎么做。

<table class="table">
    <tr>
        <th colspan=2 class="text-center">Skill Level</th>
    </tr>
    <tr>
        <th>Forehand: </th>                 
        <td>
            <img class="image star" src="img/star.png"/>
            <img class="image star" src="img/star.png"/>
        </td>
    </tr>

<table class="table">
    <tr>
        <th colspan=2 class="text-center">Skill Level    </th>
    </tr>
    <tr data-ng-repeat="skill in skillLevel">
        <th>
            {{ skill.skillName }}:
        </th>                   
        <td data-ng-repeat="i in makeArray(skill.value) track by $index">
            <img class="image star" src="img/star.png"/>
        </td>
    </tr>
</table>

从SO线程获得此makeArray函数。我已尝试为单元格设置min-width和max-width，但没有用。你能帮我吗？谢谢。

$scope.skillLevel=[
    {'skillName':'HTML', 'value': 1}, 
    {'skillName':'CSS', 'value': 4}, 
    {'skillName':'JS', 'value': 5}, 
    {'skillName':'Bootstrap', 'value': 1}
];
$scope.makeArray=function(number) {
    return new Array(number);
}

Answer 1

更改

<td data-ng-repeat="i in makeArray(skill.value) track by $index">
<img class="image star" src="img/star.png"/>
</td>

到

<td>
    <img class="image star" src="img/star.png" data-ng-repeat="i in makeArray(skill.value) track by $index" />
</td>

复制<td>单元格而不是复制<img>图像时出现问题。