解决表格内容因为滚动条导致换行(三)固定表头、宽度自适应





    
    
    滚动条不换行
    



Month Savings Savings Savings
January January January January
January January January January
January January January January
January January January January
January January January January
January January January January
January January January January
January January January January
January January January January
January January January January
January January January January
January January January January

分析:

  • 要把表头和内容分开,这样才能做到固定表头,滚动条只作用于内容。
  • 通过计算把内容除去滚动条的宽度scrollWidth,赋值给表头的宽度,保持一致。
  • 因为表头的宽度是从默认宽度再变化为与内容相等,这个过程页面会闪动,为了更好的用户体验,通过cssdisplay属性先把表头和内容隐藏,再通过jqshow()显示出来。
  • 把它独立成一个函数,页面加载时调用一次。
  • 新增事件监听,当浏览器大小发生变化时调用方法。

你可能感兴趣的:(解决表格内容因为滚动条导致换行(三)固定表头、宽度自适应)