Призрачные отступы отображаются в тд, хотя я удаляю отступы - PullRequest
Новая
       5

Призрачные отступы отображаются в тд, хотя я удаляю отступы

0 голосов
/ 21 января 2019

Я пытаюсь создать шахматную доску, используя таблицу, и поэтому хочу устранить любые отступы между элементами td:

Однако они получают отступ 8px, и Инструменты разработчика говорят, что он унаследован от моего класса noPadding:

Это не имеет никакого смысла ... Как я могу это исправить?

Остальная часть CSS, в случае, если это актуально: 

.noPadding {
  padding: 0px;
}

html {
  height: 100vh;
  width: 100%;
  margin: 0px;
}

body {
  height: 100%;
  height: 100%;
  margin: 0px;
}

.container-fluid {
  background-image: url(baggrunn.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

.thinBorder td,
.thinBorder th,
.thinBorder tr {
  border: solid #000 1px;
  padding: 0;
  margin: 0;
}

.borderless td,
.borderless th,
.borderless tr {
  border: none;
  padding: 0;
  margin: 0;
}

.noBordersBruh table td,
.noBordersBruh th {
  display: block;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
}

.top20 {
  padding-top: 15px;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}

.glyphicon {
  font-size: 20px;
}

.noPadding {
  padding: 0px;
}

.noMargin {
  margin: 0px;
}

.herregudbredde {
  width: 12.5%;
}

.fullBredde {
  width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table borderless noBordersBruh col-md-12" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="A8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="B8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="C8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="D8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="E8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="F8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt1.png" alt="G8"></td>
      <td class="noPadding"><img class="img-responsive fullBredde borderless noBordersBruh" src="Content/ikonene/felt2.png" alt="H8"></td>
    </tr>

  </tbody>
</table>

1 Ответ

0 голосов
/ 21 января 2019

Убедитесь, что класс .noPadding переопределяет заполнение класса Bootstrap '.table', определенное для элемента таблицы.

Я не могу проверить ваш код, но некоторые из этих правил CSS должны работать:

Simple: 

.noPadding {
    padding: 0 !important;
}

Или, избегая директивы !important: 

.noPadding,
.table>thead>tr>th.noPadding,
.table>tbody>tr>td.noPadding,
{
    padding: 0;
}

Возможно, вам потребуется добавить дополнительные селекторы, чтобы переопределить класс .table, как показано на скриншоте Imgur.

...