Vuetify: [v-data-table] column header border rendering glitch

Created on 20 Oct 2017 · 6Comments · Source: vuetifyjs/vuetify

Steps to reproduce

Create a simple v-data-table with at least two columns
Observe the result

Versions

0.16.7
Chrome 62
Windows 10

What is expected?

Table heading's bottom border is the same color everywhere

What is actually happening?

The second, third, etc columns' heading border is slightly darker than the first column's.

Reproduction Link

https://vuetifyjs.com/components/data-tables

bug

Source

mikere

Most helpful comment

This is actually a bug in Chrome which I have reported a while ago. It happens if there is a colspan row with rgba border (the datatable__progress). One possible workaround is to use a solid border color (like #dddddd) instead of rgba(0,0,0,.12).

sindrepm on 21 Oct 2017

👍4

All 6 comments

To confirm, are you referencing this?

Where part of the header looks like a double line?

johnleider on 21 Oct 2017

👍2

@johnleider In your screenshot, the bottom border is lighter in the first column.

KaelWD on 21 Oct 2017

😄1

sindrepm on 21 Oct 2017

👍4

@johnleider Yes, as @KaelWD wrote, the bottom border of the first column is lighter.

mikere on 21 Oct 2017

👍1

Thanks @sindrepm for reminder, we encounter the same problem as well, and solve it by changing the border to solid color (solid 1px #DDD).

  .table >>> .table thead {
    border-bottom: solid 1px #DDDDDD;
  }
  .table >>> .table tbody tr:not(:last-child) {
    border-bottom: solid 1px #DDDDDD;
  }
  .table >>> .table tfoot tr {
    border-top: solid 1px #DDDDDD;
  }

ckitt on 1 Dec 2017

👍1

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord