Как обеспечить одинаковое расстояние между элементами ячеек в таблице в мобильном представлении? - PullRequest
Новая
       8

Как обеспечить одинаковое расстояние между элементами ячеек в таблице в мобильном представлении?

0 голосов
/ 01 октября 2018

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

HTML-код для этого конкретного раздела кода, где я хочу равный интервал:

HTML-код: 

<td id="gv-field-6-25" class="gv-field-6-25"></td>

<td id="gv-field-6-29" class="gv-field-6-29">2016</td>

CSSкод:

Полный код CSS, который я использую для создания элементов ячейки: 

@media (max-width: 767px) {

 .gv-container-2777  th {
    display: none;
  }

  .gv-container-2777  tr + tr {
    display: block;
    border-top: 1px solid black;
        border-bottom: 1px solid black;
  }

 .gv-container-2777 td {
    display: block;
        margin-bottom: 5%;
        margin-top: 7.9%;
  }

 .gv-container-2777     td::before {
      display: block;
      font-weight: bold;
            margin-bottom: 1.6%;
    }


 .gv-container-2777   td:first-child::before {
    content: 'Year Submitted';
  }

 .gv-container-2777    td:nth-child(2)::before {
    content: 'Descriptive Title of Proposal:';
  }

 .gv-container-2777    td:nth-child(3)::before {
    content: 'Name of Institution';
  }

 .gv-container-2777    td:nth-child(4)::before {
   content: 'Awarded'; 

  }

}

Постановка задачи:

Мне интересно, какие изменения я должен внести в код CSS ( не может изменить код HTML, так как все это происходит из wordpress ), чтобы между элементами был одинаковый интервал до и после границы.

Приложены скриншоты, где я хочу равный интервал до и после границы:

1-е изображение:

enter image description here

2-е изображение:

enter image description here

3-е изображение:

enter image description here

4-еИзображение:

enter image description here

На приведенном выше снимке экрана интервал отключен до и после границы.Мне интересно, какие изменения я должен внести в скрипку, чтобы найти одинаковый интервал до и после границы.

1 Ответ

0 голосов
/ 01 октября 2018

  1. Дайте margin-bottom и margin-top для .gv-container-2777 td одинакового значения.

    .gv-container-2777 td {

    margin-top: 5%;
margin-bottom: 5%;

    }

  2. Удалить margin-bottom для .gv-container-2777 td::before

...