具有colspan列的单元格上的html表格最大宽度

Question

我有这个简单的表格，想法是显示带背景边框的文字：

<table style="border-spacing:0px;width:270px">
<tbody>
    <tr>
        <td class="tip1"></td>
        <td class="tip2"></td>
        <td class="tip3"></td>
        <td class="tip4"></td>
    </tr>
    <tr>
        <td class="tip5"></td>
        <td colspan="2" class="tip10">Here goes mi Text, lot of text</td>
        <td class="tip6"></td>
    </tr>
    <tr>
        <td class="tip7"></td>
        <td class="tip8"></td>
        <td class="tip8"></td>
        <td class="tip9"></td>
    </tr>
</tbody>
</table>

这就是CSS：

.tip1 {
    background-image: url(/images/ficha/tip1.png);
    height: 11px;
    width: 8px;
    padding: 0px;
}

.tip2 {
    background: url(/images/ficha/tip2.png) no-repeat left;
    height: 11px;
    max-width: 13px;
    padding: 0px;
}

.tip3 {
    background-image: url(/images/ficha/tip3.png);
    height: 11px;
    padding: 0px;
}

.tip4 {
    background-image: url(/images/ficha/tip4.png);
    height: 11px;
    width: 8px;
    padding: 0px;
}
.tip5 {
    background-image: url(/images/ficha/tip5.png);
    width: 8px;
    padding: 0px;
}
.tip6 {
    background-image: url(/images/ficha/tip6.png);
    width: 8px;
    padding: 0px;
}

.tip7 {
    background-image: url(/images/ficha/tip7.png);
    height: 8px;
    width: 8px;
    padding: 0px;
}

.tip8 {
    background-image: url(/images/ficha/tip8.png);
    height: 8px;
    padding: 0px;
}
.tip9 {
    background-image: url(/images/ficha/tip9.png);
    height: 8px;
    width: 8px;
    padding: 0px;
}
.tip10 {
    background-color: #F8F8F8;
}

tip2应该是13px宽度，但我无法弄清楚为什么Chrome渲染196px列宽，任何想法？ tip3应该是可调整大小的列