javascript - 删除HTML表格中各列之间的空间

我有一个如下的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网格，则可以避免使用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;
}