Пространство над и под HTML таблицей значительно варьируется от Google Chrome до Microsoft Edge - PullRequest
Новая
       53

Пространство над и под HTML таблицей значительно варьируется от Google Chrome до Microsoft Edge

0 голосов
/ 16 марта 2020

На сайте https://neu.seidelpartner.ch/ У меня есть следующая таблица HTML, которая вставляется в текстовое поле WordPress: 

#kunden {
  border-spacing: 30px;
}

#cell1,
#cell2,
#cell3,
#cell4,
#cell5,
#cell6,
#cell7,
#cell8 {
  font-family: "Proxima Nova Bold";
  font-size: 14px;
  color: #857f7b;
  letter-spacing: 2px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid black;
  border-radius: 15px;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.5), 2px 2px rgba(0, 0, 0, 0.4), 3px 3px rgba(0, 0, 0, 0.3), 4px 4px rgba(0, 0, 0, 0.2), 5px 5px rgba(0, 0, 0, 0.1), 6px 6px rgba(0, 0, 0, 0.08), 7px 7px rgba(0, 0, 0, 0.06), 8px 8px rgba(0, 0, 0, 0.04);
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 10px;
  padding-right: 10px;
  width: 200px;
  height: 160px;
}
<table id="kunden">
  <tr id="row1">
    <td id="cell1">BAHNUNTERNEHMEN</td>
    <td id="cell2">BEHÖRDEN</td>
    <td id="cell3">GENOSSENSCHAFTEN</td>
    <td id="cell4">INVESTOREN</td>
  </tr>
  <tr id=row2>
    <td id="cell5">PROJEKTENTWICKLER</td>
    <td id="cell6">IMMOBILIEN-ANLAGESTIFTUNGEN</td>
    <td id="cell7">KMU</td>
    <td id="cell8">PLANER</td>
  </tr>
</table>

Теперь я заметил, что пространство над и под таблицей сильно варьируется от Google Chrome (первое изображение, большое пространство) до Microsoft Edge (второе образ, небольшое пространство). С моей стороны задумано, как это выглядит в Edge.

enter image description here enter image description here

Я провел некоторые исследования, и кажется, что такие Различия в расстоянии между разными людьми возникали на разных элементах, но я не смог решить проблему самостоятельно.

Это также мой первый контакт с HTML и CSS. Я не учил их с самого начала, а просто исследовал, что мне нужно.

Большое спасибо за любые отзывы.

С уважением

1 Ответ

0 голосов
/ 16 марта 2020

Спасибо @Pete за изменение кода на фрагмент, я не знал, что это возможно (очень крутая функция). Ваш комментарий заставил меня глубже взглянуть на проблему, и я мог решить ее сам.

Был псевдоэлемент ::before и ::after выше и ниже таблицы.

Возможно было удалить это с: 

div.gdlr-core-pbf-column-content.clearfix.gdlr-core-js::before {
    content: none;
}

div.gdlr-core-pbf-column-content.clearfix.gdlr-core-js::after {
    content: none;
}

С уважением

...