title: Set height of tbody without display: block
body: <p>I'm trying to fix the <code>height</code> of <code>tbody</code> without use <code>display: block</code> as explained <a href="https://www.tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/" rel="nofollow noreferrer">here</a> and <a href="https://jsfiddle.net/hashem/CrSpu/554/" rel="nofollow noreferrer">here</a> because I handle column sizes by dragdrop</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = "&amp;nbsp;";
        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 =&gt; response.json())
          .then((photos) =&gt; {
            this.photos = photos;
          })
      }
    },
    mounted() {
      this.load();
    },
    directives: {
      columnResizable
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    margin-bottom: 0;
    table-layout: fixed;
    width: 100%;
    position: relative;
  }
  
  table&gt;tbody {
    max-height: 400px;
    height: 400px;
    overflow-y: auto;
    display: block;
  }
  
  .ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;table v-column-resizable=""&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Id&lt;/th&gt;
          &lt;th&gt;Title&lt;/th&gt;
          &lt;th&gt;URL&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr v-for="photo in photos"&gt;
          &lt;td&gt;{{photo.id}}&lt;/td&gt;
          &lt;td class="ellipsis"&gt;{{photo.title}}&lt;/td&gt;
          &lt;td class="ellipsis"&gt;{{photo.url}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
  
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see .. didn't work....</p>
  
  <p>If I remove <code>display:block</code> from <code>tbody</code>.. works... but I need fix tbody height size.</p>
  
  <p><strong>How to fix tbody height without break column resizable</strong></p>