删除html表中列之间的空格答案

【问题标题】：Removing space between columns in html table删除html表中列之间的空格
【发布时间】：2019-10-30 20:02:46
【问题描述】：

我有一个 HTML 表格，如下所示

部分代码如下：

<table>
  <tr>

    <td>
      <div style="width: 4.999999998%;" class="col-md-.6 col-sm-6">
        <div style="height: 103px; width:80px;" class="location-block">
          <div class="city-img">
            <img src="worldwide-location.png" class="img-responsive" alt="city">
            <div class="overlay-bg"></div>
          </div>
          <div class="city-dtl text-center">


            <a href="#" style="margin-left: -30px" class="btn btn-pink hidden-xs">Read More</a>
          </div>
        </div>

      </div>

    </td>


    <td>


      <div style=" width: 4.999999998%;" class="col-md-.6 col-sm-6">
        <div style="height: 50px; width:80px;" class="location-block">
          <div class="city-img">
            <img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
            <div class="overlay-bg"></div>
          </div>

          <div class="city-dtl text-center">


            <a href="#" style="margin-left: -30px;" class="btn btn-pink hidden-xs">Read More</a>
          </div>
        </div>

        <div style="height: 50px; width:80px; margin-top: -27px;" class="location-block">
          <div class="city-img">
            <img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
            <div class="overlay-bg"></div>
          </div>

          <div class="city-dtl text-center">

            <a href="#" style="margin-left: -30px;" class="btn btn-pink hidden-xs">Read More</a>
          </div>
        </div>


      </div>
    </td>

表格如下所示：

enter image description here

您可以看到每列之间的空白，我正在尝试减少它们之间的空白，但这没有发生，我尝试了 padding-left 并且还给表格提供了单元格间距，它没有改变，谁能告诉我我的代码有什么问题？提前致谢。

【问题讨论】：

您正在使用表格进行视觉布局以及内联样式和看起来像 Bootstrap 类的东西。这行不通。表格不适合布局。 Bootstrap 样式和用户代理样式表（默认 CSS）将与您尝试更改的任何内容发生冲突。我确信有一种方法可以做你想做的事，但不能用这段代码回答这个问题。它可能需要在带有子 IMG 元素的 DIV 块中。我建议您提出一个新问题来描述您想要做什么。

标签： javascript html css html-table

【解决方案1】：

如果你决定使用 Bootstrap 网格，你可以避免使用 HTML 表格标签，并使用如下结构：

<div class="row">
  <div class="col margin-col">
    <div>Images and content 1</div>
  </div>
  <div class="col margin-col">
    <div>Images and content 2</div>
  </div>
</div>

使用像这样的适当 CSS 规则来设置填充（列内）和边距（列外）：

.margin-col{
  padding: 10px;
  margin: 20px;
}

【讨论】：