Bootstrap 4 如何在引导中使用背景图像管理响应性表格缩放的最佳方法？

我目前正在处理bootstrap表（以前只是硬编码html/css），我对bootstrap处理某些事情的方式有问题：

这是HTML：

'''<header class="text-center mb-3 shadow rounded"
          style="background-image: url(...); background-repeat: no-repeat; background-size: 100%;">
          <div class="row">
            <div class="col-md-0 pr-1">
            </div>
            <div class="col-md-2"><img src="..." alt="logo" class="p-1" id="logo" style="display: none;">
            </div>
            <div class="col-md-9">
              <table class="table border-0" cellspacing="0" cellpadding="0" width="100%" height="100%">
                <tbody>
                  <tr>
                    <td class="align-middle" id="header_telefon" style="display: none;"><a href="#"
                        class="telefon"><img src="img/telefon.png" border="0" height="40"></a></td>
                    <td class="align-middle" id="header_script"><img src="..." alt="script" class="p-1"
                        style="width: 300px;"></td>
                    <td class="align-middle" id="header_maps" style="display: none;"><a href="#"
                        target="_blank"><img src="jpg/gmap.gif" border="0" width="40"></a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </header>'''

“”
'''

带有“col-md-0”的标签可能已经过时了，我只是需要它作为间距，因为我知道网格的总数只有11个，但否则布局就会崩溃

背景图像为253x187像素（1.35），在计算机上，它在整个屏幕上显示了一行可爱的图像，大约180px高，因为徽标图片高178px，宽165px。在左边有标志，在右边我有脚本图片。脚本图片很低，已经缩小了300。两张图片在同一行，完全对齐

我对此感到非常高兴。但是-还有一个javascript，它正在对移动视图进行一些更改：

'''var h = document.getElementById("header_telefon");
        var l = document.getElementById("header_maps");
        var m = document.getElementById("logo");
        var n = document.getElementById("header_script");
        var windowWidth = window.screen.width < window.outerWidth ?
          window.screen.width : window.outerWidth;
        var mobile = windowWidth < 500;
        if (mobile) {
          l.style.display = "block";
          m.style.height = "100px";
          n.style.display = "none";
        };'''

var h=document.getElementById（“header_telefon”）； var l=document.getElementById（“标题映射”）； var m=document.getElementById（“徽标”）； var n=document.getElementById（“头脚本”）； var windowWidth=window.screen.width 之后，徽标变小了（需要，否则背景图像底部的像素就用完了），仍然在最左侧-这是可以的。我已经没有剧本了（这就是我喜欢的）。和2个小图标PICS是完全对齐在中间-但在每一行。我本以为他们会在同一排！？我本以为这两个图标会出现在徽标下方的第二行，两个图标都对齐得很好，但没有

但这还不是全部——不管什么原因，背景图像在每行之间都会留下细小的白线！？它很小，但不好

顺便说一句，如果我在计算机视图中将窗口挤在一起，白线也会产生同样的效果

有人知道为什么会发生这样的事情吗？有没有办法让事情变成应该的样子