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

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 也充当左边框。

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

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>

希望这有帮助！ ：）

Answer 2

不确定CSS的其余部分是什么样的，但您可以为所有单元格指定border-right和border-bottom，然后将border-left应用于:first-child

md-grid-tile {
  float: left;
}

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

md-grid-tile:first-child {
  border-left: 1px solid #e0e0e0;
}

<md-grid-tile>
  <md-grid-tile-header>
    <h3>This is a header</h3>
  </md-grid-tile-header>
</md-grid-tile>

<md-grid-tile>
  <md-grid-tile-header>
    <h3>This is a header</h3>
  </md-grid-tile-header>
</md-grid-tile>

<md-grid-tile>
  <md-grid-tile-header>
    <h3>This is a header</h3>
  </md-grid-tile-header>
</md-grid-tile>