web-dev-qa-db-ja.com

背景色が存在する場合、「position：sticky」で境界線が表示されないのはなぜですか？

position: 'sticky' Chrome 56 に上陸しましたが、特定の状況では境界が見えなくなります。

次の例を考えてみましょう。

table {
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
}

th {
  background-color: #fff;
  border-right: 5px solid red;
}
<table>
  <thead>
    <tr>
      <th>First</th>
      <th>Second</th>
      <th>Third</th>
    </tr>
  </thead>
</table>

Chrome 56.0.2924.76、最後の<th>の境界線が表示され、これは<th> があります background-colorが指定されました。

これはChromeのバグですか？

プレイグラウンド

cssgoogle-chromesticky
31
Misha Moroshko

リフローを部分的に助けるように強制するようです：

table {
  border-collapse: collapse;
}

thead {
  position: sticky;
  top: 0;
}

th {
  border-right: 5px solid red;
  transform:scale(0.999);
}
  <table>
    <thead>
      <tr>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
      </tr>
    </thead>
  </table>

background-clipも効率的で無害なようです：

table {
  margin-top: 1em;
  border-collapse: collapse;
  margin-bottom: 200vh
}

thead {
  position: sticky;
  top: 0;
}

th {
  border-right: 5px solid red;
  background:white; 
  background-clip: padding-box;
}
  <table>
    <thead>
      <tr>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
      </tr>
    </thead>
  </table>
11
G-Cyr

私は同じ問題に直面しました。私の回避策は、:after下部の境界線をエミュレートする擬似要素。

th:after{
    content:'';
    position:absolute;
    left: 0;
    bottom: 0;
    width:100%;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}
50
Eric Guan

テーブルに列の周囲に境界線があり、スティッキー位置を追加する場合、テーブルをスクロールするときにオーバーラップ効果を表示してこの効果を削除し、境界線を保持する場合、境界線を削除し、境界線の代わりにアウトラインを追加する必要があります

table tr th{
      outline: 1px solid #e9ecef;                
      border:none; 
      outline-offset: -1px;
    }
14
shahida

私は影で解決しました

table tr th {
   position: -webkit-sticky;
   position: sticky;
   top: -1px;
   z-index: 2;
   background-color: white;
   -moz-box-shadow: 0 0 1px -1px #ccc;
   -webkit-box-shadow: 0 0 1px -1px #ccc;
   box-shadow: 0 0 1px -1px #ccc;
}
6
Project Mayhem

現在、次の例は、Chrome（65）およびFirefox（59）の下でうまく機能します。

SCSSコードは、値間の関係をよりよく示しています。変数を変更して、目的の値を設定できます。

SCSS：

table {

    &.sticky-table-head {

        // Variables

        $border-width: 2px;

        $head-background-color: #ded;
        $head-border-color: #8a8;

        $background-color: #f8fff8;
        $border-color: #cdc;

        $color: #686;

        // Declarations

        margin-bottom: 1em;
        border-collapse: collapse;
        background-color: $background-color;
        color: $color;

        &:last-child {
            margin-bottom: 100vh;
        }

        th,
        td {
            border: $border-width solid $border-color;
        }

        thead {

            th {
                position: sticky;
                top: ($border-width / 2);
                background-color: $head-background-color;
                outline: $border-width solid $head-border-color;
                outline-offset: (- $border-width / 2);
            }
        }
    }
}

HTMLおよびコンパイル済みCSS：

table.sticky-table-head {
        margin-bottom: 1em;
        border-collapse: collapse;
        background-color: #f8fff8;
        color: #686;
}

table.sticky-table-head:last-child {
        margin-bottom: 100vh;
}

table.sticky-table-head th,
table.sticky-table-head td {
        border: 2px solid #cdc;
}

table.sticky-table-head thead th {
        position: -webkit-sticky;
        position: sticky;
        top: 1px;
        background-color: #ded;
        outline: 2px solid #8a8;
        outline-offset: -1px;
}
<div>
        <!-- First table -->
        <table class="sticky-table-head">
                <thead>
                        <tr>
                                <th>Lorem</th>
                                <th>Ipsum</th>
                                <th>Dolor sit amet</th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                </tbody>
        </table>
        <!-- Second table -->
        <table class="sticky-table-head">
                <thead>
                        <tr>
                                <th>Lorem</th>
                                <th>Ipsum</th>
                                <th>Dolor sit amet</th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                        <tr>
                                <td>ipsum</td>
                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                <td>sit</td>
                        </tr>
                </tbody>
        </table>
</div>
2
Haász Sándor

もう1つのオプションは、コンテンツを要素でラップし、その上に境界線を配置することです。

<th><div class="th-inner">your content</div><th>

.th-inner {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

ただしthに境界線を置くと、テーブルにborder-collapse: collapseがなくても機能することがわかったので、そのために行きました。

0
Dominic
thead::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #333333;
}

境界線の代わりに擬似要素でこの同じ問題を修正しました。しかし、そもそもなぜこれが起こるのかはわかりません。

0
Alejandro

ページで水平方向の境界線のみを使用しているため、特定のケースに合わせて調整する必要がある場合があります。表のセルに半透明の背景色を使用すると、背景の下端が水平方向の境界線に重なっていることがわかりました。垂直方向の境界線の右端でも同じになると思います。境界線の重なりを避けるために、最後のピクセルを除いてすべてを埋める線形グラデーションを設定しました。残念ながら、これはFirefoxとChromeでのみ機能しますが、Edgeでは機能しません。

td:first-child
{
    position: sticky;
    left: 0px;
    z-index: 2;
    background: linear-gradient(to bottom, white, white calc(100% - 1px), transparent calc(100% - 1px), transparent);
}

Edgeは線形グラデーションをペイントしますが、上部の白から下部の透明まで、100％-1pxでの停止時のハードな変更を無視します。

0
ygoe