要解决表格内容超出表格范围的问题，可以使用CSS样式和一些代码来调整表格的大小和布局。

下面是一个示例代码，展示了如何使用CSS和一些简单的JavaScript代码来解决表格内容超出表格范围的问题：

HTML代码：

  

    

      

        
表头1
        
表头2
        
表头3
      
    
    

      

        
内容1
        
内容2
        
内容3
      
      
    
  

CSS代码：

.table-container {
  overflow: auto;
  max-height: 300px; /* 调整表格容器的最大高度 */
}

JavaScript代码（可选）：

window.addEventListener('resize', adjustTableHeight);

function adjustTableHeight() {
  const tableContainer = document.querySelector('.table-container');
  const table = document.querySelector('table');
  const windowHeight = window.innerHeight;
  const tableContainerTop = tableContainer.getBoundingClientRect().top;
  const tableContainerHeight = windowHeight - tableContainerTop;
  
  // 调整表格容器的高度
  tableContainer.style.maxHeight = tableContainerHeight + 'px';
  
  // 调整表格的布局
  if (table.offsetHeight > tableContainerHeight) {
    table.style.width = 'calc(100% - 17px)'; // 减去滚动条宽度
  } else {
    table.style.width = '100%';
  }
}

adjustTableHeight(); // 页面加载时调整表格高度

上述代码中，.table-container 是包裹表格的容器元素，通过设置 overflow: auto; 和 max-height 属性来创建一个可滚动的表格容器。max-height 属性可以根据需要进行调整，根据容器的高度限制表格内容的显示。

在 JavaScript 代码中，我们通过监听窗口的大小变化事件 resize 来动态调整表格的高度和布局。adjustTableHeight 函数会计算表格容器的最大高度，并根据需要调整表格的布局。