如何在移动视图中的表格中的单元格元素之间具有相等的间距？答案

【问题标题】：How to have equal spacing between cell elements in table in mobile view?如何在移动视图中的表格中的单元格元素之间具有相等的间距？
【发布时间】：2018-10-01 12:40:02
【问题描述】：

我正在处理website，我希望在移动视图中的单元格元素之间具有相等的间距。

我想要等间距的特定代码部分的 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），以便边框前后元素之间的间距相等.

附上我希望边框前后等间距的截图：

第一张图片：

第二张图片：

第三张图片：

第四张图片：

在上面的屏幕截图中，边框前后的间距是关闭的。我想知道我应该在小提琴中进行哪些更改，以便在边框前后找到相等的间距。

【问题讨论】：

问题出在你的td::beforemargin-bottom;那些没有奖励的人不会得到这个额外的利润。简单地删除它可以接受吗？

标签： html css responsive

【解决方案1】：

将margin-bottom 和margin-top 赋予.gv-container-2777 td 相同的值。

.gv-container-2777 td {
```
margin-top: 5%;
margin-bottom: 5%;
```
}
为.gv-container-2777 td::before删除margin-bottom

【讨论】：