不使用Flexbox时，如何缩小HTML表格布局中Logo与文本的间距

嗨，我来帮你搞定这个问题！你用表格布局实现Logo和文本并排的思路没问题，间距过大主要是表格默认的单元格间距、内边距在起作用，不用Flexbox也能轻松调整，给你几个简单可行的方案：

核心调整思路 #

表格默认会自带border-spacing（单元格之间的空隙）和单元格内边距，这两个是导致间距偏大的主要原因，我们针对性修改就行：

• 移除表格默认单元格间距：给<table>添加border-collapse: collapse;样式，或者直接设置border-spacing: 0;，让单元格之间的默认空隙完全消失。
• 缩小Logo单元格的右侧内边距：给放Logo的<td>设置padding-right: Xpx;（X可以是5px、8px这类小数值，根据你的视觉需求调整），代替默认的内边距，拉近和右侧文本的距离。
• 可选：取消文本单元格的左侧内边距：如果文本所在的<td>有默认左内边距，设置padding-left: 0;能进一步缩小间距。

修改后的完整代码 #

<style>
.name1 {
    font-size: 25px;
    color: #e9c46a;
}
.name2 {
    font-size: 25px;
    color: white;
}
</style>

<table style="background-color: cadetblue;width:100%;padding:10px; border-collapse: collapse;">
    <tr>
        <td rowspan="3" style="padding-right: 8px;">
            <img src="logo.png" height="80" width="80" />
        </td>
    </tr>
    <tr>
        <td class="name1" style="padding-left: 0;">This is some text</td>
    </tr>
    <tr>
        <td class="name2" style="padding-left: 0;">This is some text1</td>
    </tr>
</table>

你可以根据实际显示效果，微调padding-right的数值，直到达到你想要的紧凑程度~

备注：内容来源于stack exchange，提问作者Alex