如何让表格整体缩放到父div内，完整显示多行内容无滚动分页

需要一个能动态适配各类设备（PC显示器、电视、平板、手机）屏幕的div容器，当前容器高度设为50vh。容器内有一个40-50行的表格，要求完整显示所有行（无论字体或行高多小），不允许出现滚动、分页或内容截断。尝试后发现内容要么被截断隐藏，要么出现滚动条，寻求解决方法。

• 让表格完全继承容器高度：设置表格高度为100%，同时启用table-layout: fixed固定表格布局，避免列宽自动变化打乱整体适配。
• 动态计算行高+字体大小：仅设置行高不足以避免文字溢出，需要根据行高比例动态缩小字体，确保文字能在单元格内显示。
• 移除容器的overflow: hidden：靠行高和字体的动态调整保证内容完整展示，不需要隐藏溢出内容。

HTML #

<div class="container">
    <table id="myTable">
        <tbody></tbody>
    </table>
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 50vh;
  width: 90vw;
  margin: 2rem auto;
  border: 2px solid #666;
}

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  border: 1px solid #999;
  text-align: center;
  padding: 0; /* 移除内边距节省空间 */
  white-space: nowrap; /* 防止文字换行占用额外高度 */
  overflow: hidden; /* 极端情况下防止文字溢出单元格 */
  text-overflow: ellipsis; /* 可选：文字过长时显示省略号，保证布局整齐 */
}

JavaScript #

const container = document.querySelector('.container');
const tbody = document.querySelector('#myTable tbody');

const ROW_COUNT = 40;
for (let i = 1; i <= ROW_COUNT; i++) {
  const tr = document.createElement('tr');
  const td = document.createElement('td');
  td.textContent = 'Row ' + i;
  tr.appendChild(td);
  tbody.appendChild(tr);
}

function updateRowStyles() {
  const rows = tbody.querySelectorAll('tr');
  const totalHeight = container.clientHeight;
  const rowHeight = totalHeight / rows.length;
  
  rows.forEach(row => {
    row.style.height = `${rowHeight}px`;
    // 动态设置字体大小，取行高的60%作为基准，可根据需求调整比例
    const fontSize = Math.max(8, rowHeight * 0.6) + 'px';
    row.querySelector('td').style.fontSize = fontSize;
  });
}

updateRowStyles();
window.addEventListener('resize', updateRowStyles);

• 字体大小设置了最小8px的限制，避免过小导致完全无法阅读，可根据需求调整这个最小值。
• text-overflow: ellipsis是可选配置，如果允许文字换行可以移除，换成word-break: break-all，但会增加行高风险，建议保留省略号保证布局稳定。
• 容器移除了overflow: hidden，确保所有行都能完整展示，靠行高和字体的动态压缩适配容器高度。

内容的提问来源于stack exchange，提问作者Matthew Bima