设置没有显示的tbody的高度:块

Question

我正在尝试修复tbody的height，而无需使用display: block，因为我在此处和此处解释

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>

您可以看到..没有工作....

如果我从 tbody中删除 display:block。

如何固定tbody高度而不断裂列可解析

Answer 1

我找到了我的解决方法..不是一个完美的解决方案，而是有效的。

我带回了tr

的行为

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

，当用户拖动/删除列时，我再次固定所有行的大小。

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

我尝试编辑小提琴链接（https://jsfiddle.net/hashem/crspu/554/）您在上面提到，并且在那里工作。

我仅对CSS进行更改。

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