Set Höhe von tbody ohne Display: Block

Question

Ich versuche, die height von tbody ohne Verwendung display: block zu beheben, wie here und here erklärt, weil ich durch Drag & Drop-

const columnResizable = { 
 
    inserted: function(el) { 
 
    var thElm; 
 
    var startOffset; 
 

 
    var thead = el.getElementsByTagName('thead')[0]; 
 

 
    function handleHeadColumn(th) { 
 
     th.style.position = 'relative'; 
 
     var grip = document.createElement('div'); 
 
     grip.innerHTML = " "; 
 
     grip.style.top = 0; 
 
     grip.style.right = 0; 
 
     grip.style.bottom = 0; 
 
     grip.style.width = '2px'; 
 
     grip.style.marginLeft = '3px'; 
 
     grip.style.marginRight = '3px'; 
 
     grip.style.backgroundColor = '#e8e7e7'; 
 
     grip.style.position = 'absolute'; 
 
     grip.style.cursor = 'col-resize'; 
 
     grip.addEventListener('mousedown', function setActiveColumn(e) { 
 
     thElm = th; 
 
     startOffset = th.offsetWidth - e.pageX; 
 
     }); 
 
     th.appendChild(grip); 
 
    } 
 
    Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"), 
 
     handleHeadColumn); 
 

 
    thead.addEventListener('mousemove', function handleColumnMovement(e) { 
 
     if (thElm) { 
 
     var tds = el.querySelectorAll("tbody td:nth-child(" + (thElm.cellIndex + 1) + ")"); 
 
     var width = startOffset + e.pageX + 'px'; 
 
     tds[0].style.width = width; 
 
     tds[0].width = width; 
 
     tds[0].minWidth = width; 
 
     thElm.width = width; 
 
     thElm.style.width = width; 
 
     thElm.minWidth = width; 
 
     } 
 
    }); 
 
    thead.addEventListener('mouseup', function unsetActiveColumn() { 
 
     thElm = undefined; 
 
    }); 
 
    }, 
 
    unbind: function(el) { 
 
    var thead = el.getElementsByTagName('thead')[0]; 
 
    thead.removeEventListener('mousemove'); 
 
    thead.removeEventListener('mouseup'); 
 
    Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"), 
 
     function removeEventHandle(th) { 
 
     var grip = th.getElementsByTagName('div')[0]; 
 
     grip.removeEventListener('mousedown'); 
 
     } 
 
    ); 
 
    } 
 
} 
 

 
var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    photos: [] 
 
    }, 
 
    methods: { 
 
    load() { 
 
     const url = 'https://jsonplaceholder.typicode.com/photos'; 
 
     fetch(url) 
 
     .then(response => response.json()) 
 
     .then((photos) => { 
 
      this.photos = photos; 
 
     }) 
 
    } 
 
    }, 
 
    mounted() { 
 
    this.load(); 
 
    }, 
 
    directives: { 
 
    columnResizable 
 
    } 
 
})

table { 
 
    margin-bottom: 0; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
table>tbody { 
 
    max-height: 400px; 
 
    height: 400px; 
 
    overflow-y: auto; 
 
    display: block; 
 
} 
 

 
.ellipsis { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <table v-column-resizable=""> 
 
    <thead> 
 
     <tr> 
 
     <th>Id</th> 
 
     <th>Title</th> 
 
     <th>URL</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr v-for="photo in photos"> 
 
     <td>{{photo.id}}</td> 
 
     <td class="ellipsis">{{photo.title}}</td> 
 
     <td class="ellipsis">{{photo.url}}</td> 
 
     </tr> 
 
    </tbody> 
 

 
    </table> 
 
</div>

Als Spaltengrößen handhaben Sie können sehen .. hat nicht funktioniert ....

Wenn ich display:block vonentfernen.. funktioniert ... aber ich brauche fixe tbody height size.

Wie tbody Höhe ohne Pause Spalte resizable

Answer 1

Ich fand ich eine Abhilfe ... keine perfekte Lösung, aber funktioniert.

bringe ich das Verhalten von tr

table thead, table tbody tr { 
    .... 
    display:table; 
    table-layout:fixed; 
} 

table > tbody { 
    .... 
    display: block; 
} 

zurück und wenn der Benutzer per Drag/die Spalte fallen, ich fix Spalten Größe aller wieder Reihen.

const columnResizable = { 
 
    inserted: function(el) { 
 
    var thElm; 
 
    var startOffset; 
 

 
    var thead = el.getElementsByTagName('thead')[0]; 
 

 
    function handleHeadColumn(th) { 
 
     th.style.position = 'relative'; 
 
     var grip = document.createElement('div'); 
 
     grip.innerHTML = " "; 
 
     grip.style.top = 0; 
 
     grip.style.right = 0; 
 
     grip.style.bottom = 0; 
 
     grip.style.width = '2px'; 
 
     grip.style.marginLeft = '3px'; 
 
     grip.style.marginRight = '3px'; 
 
     grip.style.backgroundColor = '#e8e7e7'; 
 
     grip.style.position = 'absolute'; 
 
     grip.style.cursor = 'col-resize'; 
 
     grip.addEventListener('mousedown', function setActiveColumn(e) { 
 
     thElm = th; 
 
     startOffset = th.offsetWidth - e.pageX; 
 
     }); 
 
     th.appendChild(grip); 
 
    } 
 
    Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"), 
 
     handleHeadColumn); 
 

 
    thead.addEventListener('mousemove', function handleColumnMovement(e) { 
 
     if (thElm) { 
 
     var tds = el.querySelectorAll("tbody td:nth-child(" + (thElm.cellIndex + 1) + ")"); 
 
     var width = startOffset + e.pageX + 'px'; 
 
     tds[0].style.width = width; 
 
     tds[0].width = width; 
 
     tds[0].minWidth = width; 
 
     thElm.width = width; 
 
     thElm.style.width = width; 
 
     thElm.minWidth = width; 
 
     } 
 
    }); 
 
    thead.addEventListener('mouseup', function unsetActiveColumn() { 
 
     thElm = undefined; 
 
    }); 
 
    }, 
 
    unbind: function(el) { 
 
    var thead = el.getElementsByTagName('thead')[0]; 
 
    thead.removeEventListener('mousemove'); 
 
    thead.removeEventListener('mouseup'); 
 
    Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"), 
 
     function removeEventHandle(th) { 
 
     var grip = th.getElementsByTagName('div')[0]; 
 
     grip.removeEventListener('mousedown'); 
 
     } 
 
    ); 
 
    } 
 
} 
 

 
var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    photos: [] 
 
    }, 
 
    methods: { 
 
    load() { 
 
     const url = 'https://jsonplaceholder.typicode.com/photos'; 
 
     fetch(url) 
 
     .then(response => response.json()) 
 
     .then((photos) => { 
 
      this.photos = photos; 
 
     }) 
 
    } 
 
    }, 
 
    mounted() { 
 
    this.load(); 
 
    }, 
 
    directives: { 
 
    columnResizable 
 
    } 
 
})

table { 
 
    margin-bottom: 0; 
 
    width: 100%; 
 
} 
 
table thead, table tbody tr { 
 
    display:table; 
 
    width:100%; 
 
    table-layout:fixed; 
 
} 
 

 
table > tbody { 
 
    max-height: 400px; 
 
    height:400px; 
 
    overflow-y:scroll; 
 
    display: block; 
 
} 
 

 
.ellipsis { 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <table v-column-resizable=""> 
 
    <thead> 
 
     <tr> 
 
     <th>Id</th> 
 
     <th>Title</th> 
 
     <th>URL</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr v-for="photo in photos"> 
 
     <td>{{photo.id}}</td> 
 
     <td class="ellipsis">{{photo.title}}</td> 
 
     <td class="ellipsis">{{photo.url}}</td> 
 
     </tr> 
 
    </tbody> 
 

 
    </table> 
 
</div>

Answer 2

Ich bearbeite versucht, die Geige Link (https://jsfiddle.net/hashem/CrSpu/554/ ) Sie oben erwähnt, und es funktioniert dort zu fixieren.

Ich habe Änderungen nur an CSS vorgenommen.

table.scroll tbody { 
     height: 150px; 
     overflow-y: auto; 
     overflow-x: hidden; 
    }