Why border is not visible with "position: sticky" when background-color exists?

position: 'sticky' landed in Chrome 56, but it makes the border invisible in certain circumstances.

Consider the following example:

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>

In Chrome 56.0.2924.76, only the last <th>'s border is visible, and this is only when <th> has a background-color specified.

Is this a bug in Chrome?

Playground

I faced the same problem. My workaround was to use the :after pseudo element to emulate a bottom border.

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

seems like to force a reflow will partially help :

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 seems also efficient and harmless:

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>

if table contains border around columns and we add sticky position, when we scroll the table show overlapping effect to remove this effect and retains border we need to remove border and add outline instead of border

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

I have solved with shadow

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;
}

The next example currently works well under Chrome (65) and Firefox (59).

The SCSS code illustrates better the relationship between values. You can set the desired values by change the variables.

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 and compiled 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>

Why border is not visible with "position: sticky" when background-color exists?

Related

Recent Posts