html - 如何为表格中的字段设置边框？

Question

我有一些字段的表。我尝试只设置一次边框样式:

md-grid-tile:not(.header), md-grid-tile:not(.md-grid-header) {
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
}

但是我得到了两次边界。我知道有一个简单的解决方案，但我忘记了

HTML:

 <md-grid-list cols="3" rowHeight="10" id="alarm_schedule" class="md-grid-list-custom">

          <!-- Header -->
          <md-grid-tile rowspan="5" colspan="1" class="md-grid-header"><span>Урок</span></md-grid-tile>
          <md-grid-tile rowspan="5" colspan="1" class="md-grid-header"><span>Время (от)</span></md-grid-tile>
          <md-grid-tile rowspan="5" colspan="1" class="md-grid-header"><span>Время (до)</span></md-grid-tile>
</md-grid-list>

Answer 1

我建议使用 :first-of-type伪选择器。仅将 border-left 应用于第一个元素会导致每个元素的 border-right 也用作左边框。

您可以使用 -2px 的 margin 来确保单元格之间没有间隙:

md-grid-tile:not(.header),
md-grid-tile:not(.md-grid-header) {
  border-right: 5px solid #e0e0e0;
  border-bottom: 5px solid #e0e0e0;
  padding: 5px;
  margin: -2px;
}

md-grid-tile:first-of-type {
  border-left: 5px solid #e0e0e0;
}

<md-grid-list cols="3" rowHeight="10" id="alarm_schedule" class="md-grid-list-custom">
  <!-- Header -->
  <md-grid-tile rowspan="5" colspan="1" class="md-grid-header"><span>Урок</span></md-grid-tile>
  <md-grid-tile rowspan="5" colspan="1" class="md-grid-header"><span>Время (от)</span></md-grid-tile>
  <md-grid-tile rowspan="5" colspan="1" class="md-grid-header"><span>Время (до)</span></md-grid-tile>
</md-grid-list>

希望对您有所帮助! :)