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

我有一个简单的表格，其目的是显示带有背景边框的文本：

<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>

---

tip2应该是13px的宽度，但我不明白为什么Chrome渲染196px的列宽，知道吗？tip3应该是Fiddle中的可调整大小的列

示例，我注意到，如果我设置td边框，则宽度正常：/

.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;
}