时间戳

首页 > 解决方案 > 删除html表中列之间的空格

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>

该表如下所示：

在此处输入图像描述

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

标签： javascripthtmlcsshtml-table

解决方案

如果您决定使用 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;
}

推荐阅读