带有水平滚动条和垂直滚动条的固定标题表 [英] Fixed header table with horizontal scrollbar and vertical scrollbar on

问题描述

我一直在尝试解决 html/css 粘性标题 + 滚动条的问题.我们正在创建一个程序，一旦容器大小达到某个点(取决于用户的分辨率)，就需要显示滚动条.

我在表格的第二列上强制设置最小宽度，因此表格在某个点停止减少并强制容器保持在某个宽度.容器上的溢出显示水平滚动条.一切正常.一旦我为垂直滚动添加了第二个滚动条，事情就会变得一团糟.有人有解决这个问题的方法吗?我想在 .table-body 上有一个垂直滚动条，但滚动条必须在外部容器上可见.

对于固定标题表有没有好的 html/css 解决方案?我已经搜索了一个星期，但只能找到这种行为的 jQuery 插件.

这是我当前的 HTML:

<头><title>固定标题原型</title><link rel="stylesheet" href="css/style.css"><身体><div class="外容器"><!-- 绝对定位容器--><div class="内部容器"><div class="table-header"><table id="headertable" width="100%" cellpadding="0" cellspacing="0"><头><tr><th class="header-cell col1">One</th><th class="header-cell col2">Two</th><th class="header-cell col3">三</th><th class="header-cell col4">四</th><th class="header-cell col5">五</th></tr></thead>

<div class="table-body"><table id="bodytable" width="100%" cellpadding="0" cellspacing="0"><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr><tr><td class="body-cell col1">body row1</td><td class="body-cell col2">body row2</td><td class="body-cell col3">body row2</td><td class="body-cell col4">body row2</td><td class="body-cell col5">body row2 en nog meer</td></tr></tbody>

我的 CSS 看起来像这样:

body {保证金:0;填充:0;高度:100%；宽度:100%；}桌子 {边框折叠:折叠；/* 如果定义了边框，则制作简单的 1px 线边框 */}tr{宽度:100%；}.外容器{背景颜色:#ccc；位置:绝对；顶部:0；左:0；右:300px；底部:40px；溢出:隐藏；}.内容器{宽度:100%；高度:100%；位置:相对；溢出-x:滚动；溢出-y:隐藏；}.表头{向左飘浮;宽度:100%；}.table-body {向左飘浮;高度:100%；宽度:继承；溢出-y:滚动；}.header-cell {背景颜色:黄色；文本对齐:左；高度:40px；}.body-cell {背景颜色:蓝色；文本对齐:左；}.col1、.col3、.col4、.col5 {宽度:120px；最小宽度:120px；}.col2 {最小宽度:300px；}

JSFiddle 示例 - http://jsfiddle.net/W8URM/

提前谢谢各位！

解决方案

这并不容易.我想出了一个脚本解决方案.(我不认为这可以使用纯 CSS 来完成)

HTML 与您发布的相同，CSS 略有变化，添加了 JQuery 代码.

工作小提琴 测试: IE10、IE9、IE8, FF, 铬

顺便说一句:如果您有独特的元素，为什么不使用 id 而不是类?我认为它提供了更好的选择器性能.

工作原理的说明:inner-container 将跨越 outer-container 的整个空间(所以基本上，他不需要)但我把他留在那里，所以你不需要改变你的 DOM.

table-header是相对定位的，没有scroll(overflow: hidden)，后面我们会处理他的scroll.

table-body 必须跨越 inner-container 高度的其余部分，所以我使用了一个脚本来确定修复他的高度.(当您重新调整窗口大小时，它会动态变化)如果没有固定的高度，滚动就不会出现，因为 div 只会变大.请注意，这部分可以在没有脚本的情况下完成，如果您固定标题高度并使用 CSS3(如答案末尾所示)

现在只需在每次滚动时移动标题和正文即可.这是由分配给 scroll 事件的函数完成的.

CSS(其中一些是从您的样式中复制而来的)

<预><代码>*{填充:0；边距:0；}身体{高度:100%；宽度:100%；}桌子{边框折叠:折叠；/* 如果定义了边框，则制作简单的 1px 线边框 */}.外容器{背景颜色:#ccc；位置:绝对；顶部:0；左:0；右:300px；底部:40px；}.内容器{高度:100%；溢出:隐藏；}.table-header{位置:相对；}.table-body{溢出:自动；}.header-cell{背景颜色:黄色；文本对齐:左；高度:40px；}.体细胞{背景颜色:蓝色；文本对齐:左；}.col1、.col3、.col4、.col5{宽度:120px；最小宽度:120px；}.col2{最小宽度:300px；}

JQuery

$(document).ready(function () {setTableBody();$(window).resize(setTableBody);$(".table-body").scroll(function (){$(".table-header").offset({ left: -1*this.scrollLeft });});});函数 setTableBody(){$(".table-body").height($(".inner-container").height() - $(".table-header").height());}

如果您不关心固定标题高度(我看到您在 CSS 中固定了单元格的高度)，如果您使用 CSS3 可以跳过一些脚本:Shorter Fiddle(这不适用于 IE8)

I have been trying to figure out this problem i have with html/css sticky header + scrollbars. We are creating a program that requires scrollbars to show up once the containersize reaches a certain point(depending on resolution of the user).

I am forcing a min-width on the second column in the table, so the table stops decreasing at a certain point and forces the container to stay at a certain width. The overflow on the container shows the horizontal scrollbar. Everything works fine. Once i add a second scrollbar for the vertical scrolling, things are getting messed up. Does someone have a solution for this problem? I want to have a vertical scrollbar on the .table-body, but the scrollbar must be visible on the outercontainer.

Is there a good html/css solution for fixed header tables? I have been searching for a week, but can only find jQuery plugins for this kind of behaviour.

This is my current HTML:

<!DOCTYPE html>
<html>
<head>
    <title>fixed header prototyping</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="outer-container"> <!-- absolute positioned container -->
<div class="inner-container">

    <div class="table-header">
        <table id="headertable" width="100%" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th class="header-cell col1">One</th>
                    <th class="header-cell col2">Two</th>
                    <th class="header-cell col3">Three</th>
                    <th class="header-cell col4">Four</th>
                    <th class="header-cell col5">Five</th>
                </tr>
            </thead>
        </table>
    </div>

    <div class="table-body">
        <table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
                <tr>
                    <td class="body-cell col1">body row1</td>
                    <td class="body-cell col2">body row2</td>
                    <td class="body-cell col3">body row2</td>
                    <td class="body-cell col4">body row2</td>
                    <td class="body-cell col5">body row2 en nog meer</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>



</body>
</html>

And my CSS looks like this:

body {
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;
}
table {
    border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
    width: 100%;
}

.outer-container {
    background-color: #ccc;
    position: absolute;
    top:0;
    left: 0;
    right: 300px;
    bottom:40px;
    overflow: hidden;

}
.inner-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: scroll;
    overflow-y:hidden;
}
.table-header {
    float:left;
    width: 100%;
}
.table-body {
    float:left;
    height: 100%;
    width: inherit;
    overflow-y: scroll;
}
.header-cell {
    background-color: yellow;
    text-align: left;
    height: 40px;
}
.body-cell {
    background-color: blue;
    text-align: left;
}
.col1, .col3, .col4, .col5 {
    width:120px;
    min-width: 120px;
}
.col2 {
    min-width: 300px;
}

JSFiddle example - http://jsfiddle.net/W8URM/

Thanks in advance guys!

解决方案

This is not an easy one. I've come up with a Script solution. (I don't think this can be done using pure CSS)

the HTML stays the same as you posted, the CSS changes a little bit, JQuery code added.

Working Fiddle Tested on: IE10, IE9, IE8, FF, Chrome

BTW: if you have unique elements, why don't you use id's instead of classes? I think it gives a better selector performance.

Explanation of how it works: inner-container will span the entire space of the outer-container (so basically, he's not needed) but I left him there, so you wont need to change you DOM.

the table-header is relatively positioned, without a scroll (overflow: hidden), we will handle his scroll later.

the table-body have to span the rest of the inner-container height, so I used a script to determine what height to fix him. (it changes dynamically when you re-size the window) without a fixed height, the scroll wont appear, because the div will just grow large instead.. notice that this part can be done without script, if you fix the header height and use CSS3 (as shown in the end of the answer)

now it's just a matter of moving the header along with the body each time we scroll. this is done by a function assigned to the scroll event.

CSS (some of it was copied from your style)

*
{
    padding: 0;
    margin: 0;
}

body
{
    height: 100%;
    width: 100%;
}
table
{
    border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
.outer-container
{
    background-color: #ccc;
    position: absolute;
    top:0;
    left: 0;
    right: 300px;
    bottom: 40px;
}

.inner-container
{
    height: 100%;
    overflow: hidden;
}

.table-header
{
    position: relative;
}
.table-body
{
    overflow: auto;
}

.header-cell
{
    background-color: yellow;
    text-align: left;
    height: 40px;
}
.body-cell 
{
    background-color: blue;
    text-align: left;
}
.col1, .col3, .col4, .col5
{
    width:120px;
    min-width: 120px;
}
.col2
{
    min-width: 300px;
}

JQuery

$(document).ready(function () {
    setTableBody();
    $(window).resize(setTableBody);
    $(".table-body").scroll(function ()
    {
        $(".table-header").offset({ left: -1*this.scrollLeft });
    });
});

function setTableBody()
{
    $(".table-body").height($(".inner-container").height() - $(".table-header").height());
}

If you don't care about fixing the header height (I saw that you fixed the cell's height in your CSS), some of the Script can be skiped if you use CSS3 :Shorter Fiddle (this will not work on IE8)

这篇关于带有水平滚动条和垂直滚动条的固定标题表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！