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

Question

我正在使用 bootstrap 和 angular 制作一个页面。通过 BS 修复了我的布局，现在使用 Angular 。在尝试通过 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>图片。