Удаление пробела между столбцами в HTML-таблице - PullRequest
Новая
       5

Удаление пробела между столбцами в HTML-таблице

0 голосов
/ 30 октября 2019

У меня есть 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>

таблица выглядит следующим образом:

введите описание изображения здесь

Как видно из белогопробел между каждым столбцом, я пытаюсь уменьшить пробелы между ними, но этого не происходит, я пробовал отступ слева и также дал интервал между ячейками таблицы, он не меняется, может кто-нибудь сказать мне, что не так с моим кодом? Заранее спасибо.

1 Ответ

0 голосов
/ 30 октября 2019

Если вы решите использовать сетку 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;
}
...