[Vuejs]-The table border-bottom disappear?

table-row-group does not work with divs you can change the whole layout and use tables or instead you can do it like this.

.list-view-item {
        padding: 5px;
        color: #666;
        display: table;
        line-height: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid red;
        min-width: 100vw;
    }

.list-view-item-col {
    display: table-cell;
    min-width: 50px;
}

jsfiddle for table-row-group

Hope it helps.

Use display :flex for list-view-item class, Try with following code.Hope it will work fine for you.

.list-view-item {
  padding: 5px;
  color: #666;
  display: flex;
  flex-basis: 100%;
  flex-direction: row;
  line-height: 30px;
  box-sizing: border-box;
  border-bottom: 1px solid red;
}

Try with this CSS. I hope it will works for you.

 .list-view-item {
    padding: 5px;
      color: #666;
      display:table;
      line-height: 30px;
      box-sizing: border-box;
      border-bottom: 1px solid green;
    }

.list-view-item {
  padding: 5px;
  color: #666;
  display: flex;
  flex-basis: 100%;
  flex-direction: row;
  line-height: 30px;
  box-sizing: border-box;
  border-bottom: 1px solid red;
}

I try to change the js code :

this.$refs.content.style.transform = `translateY(0, ${ start * this.itemHeight }px, 0)`;

to :

this.$refs.content.style.transform = `translateY(${ start * this.itemHeight }px)`;

and add a css to div class is list-view:

transform:translateY(0)px;

then the border showed.

don’t understand why this action work!