いくつかのフィールドがあるテーブルがあります。ボーダースタイルを一度だけ設定しようとしています:
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;
}
しかし、私は2回国境を取得します。些細な解決策があることは知っていますが、それを忘れました
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>
: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>
お役に立てれば!:)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加