Html 具有固定边框单元格的表 意图 我想使用所有可用的水平和垂直空间（也就是说，整个浏览器窗口减去页边距和页眉等）绘制一个表格 调整浏览器窗口的大小时，应动态调整表的大小 它不应该比页面宽或长，相反，如果内容比单元格大，它应该滚动内容。这些单元格在下图中用箭头标记 在某个方向上没有箭头的单元格不应更改其大小，也不应在该方向上滚动，而应固定。因此，表格标题只应变宽或变窄，左右条纹只应改变其长度

顺便说一句：我正在寻找一个纯CSS/HTML解决方案

天真的尝试 我原以为是HTML101:，但表格只是在显示整个内容之前增长，高度/宽度大小被忽略 css:

和html：

<table>
    <thead><tr>
        <td class="left"><div id="content_lu"></div></td>
        <td class="center"><div id="content_cu"></div></td>
        <td class="right"><div id="content_ru"></div></td>
    </tr></thead>
    <tbody><tr>
        <td class="left"><div id="content_lm"></div></td>
        <td class="center"><div id="content_cm"></div></td>
        <td class="right"><div id="content_rm"></div></td>
    </tr></tbody>
    <tfoot><tr>
        <td class="left"><div id="content_lb"></div></td>
        <td class="center"><div id="content_cb"></div></td>
        <td class="right"><div id="content_rb"></div></td>
    </tr></tfoot>
</table>

html:

---

以下是使用绝对定位实现布局的一种方法

对于HTML：

<div class="wrapper">
    <div class="left">
        <div class="top">top</div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot">bot</div>
    </div>
    <div class="center">
        <div class="top">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot"><p>Lorem ipsum dolor sit amet...</p></div>
    </div>
    <div class="right">
        <div class="top">top</div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot">bot</div>
    </div>
</div>

请参见演示：

注意：我将高度和某些位置偏移设置为50px而不是200px，因为 jsiddle面板有点小，但是这个概念仍然有效

要处理单元格中溢出的内容，请在本例中将

overflow:auto

和

height:100%

设置为包含内容的块级元素

p

---

您可能还需要将

高度：100%

分配给

主体

和

html

标记，以定义根（屏幕）元素的垂直尺寸。

您直接询问问题的答案！！，如果您向我们展示您所做的或尝试过的，我们将不胜感激，而不是展示您所做的或尝试过的，这样我们就可以开始帮助您了there@hoffmann：你的意思是：？

webkit滚动是你的答案。但并非所有浏览器都支持它。但是您可以通过css2实现这一点，通过创建两个元素，外部元素“溢出：隐藏”和内部元素设置为“溢出：滚动”@Atlashrivastava什么是“webkit滚动”？我只发现webkit溢出滚动，这似乎只对触摸设备很重要。@abhitalk那个例子不垂直滚动，也不垂直扩展。这正是我要找的。我修改了您的代码，使其看起来像我的两个示例。
/* Structure */
div.main {
   position: relative;
    width: 80%;
    margin-left: 10%;
    height: 80%;
}

/* corners */
div.top.left {
    position: absolute;
    left: 0;        top: 0;
    width: 200px;   height: 200px;
}
div.top.right {
    position: absolute;
    right: 0;        top: 0;
    width: 200px;   height: 200px;
}
div.bottom.left {
    position: absolute;
    left: 0;        bottom: 0;
    width: 200px;   height: 200px;
}
div.bottom.right {
    position: absolute;
    right: 0;       bottom: 0;
    width: 200px;   height: 200px;
}

/* edges */
div.top.center {
    margin-left: 200px;
    margin-right: 200px;
    height: 200px;
    overflow: auto;
}
div.bottom.center {
    margin-left: 200px;
    margin-right: 200px;
    height: 200px;
    overflow: auto;
}
div.middle.left {
    margin-top: 200px;
    margin-bottom: 200px;
    width: 200px;
    overflow: auto;
}
div.middle.right {
    margin-top: 200px;
    margin-bottom: 200px;
    width: 200px;
    overflow: auto;
}

/* center */
div.middle.center {
    margin-top: 200px;
    margin-bottom: 200px;
    margin-left: 200px;
    margin-right: 200px;
    overflow: auto;
}

/* Content boxes */
#content_lu, #content_ru, #content_lb, #content_rb {
    background-color: yellow;
    height: 200px;
    width: 200px;
}
#content_cu, #content_cb {
    background-color: blue;
    width: 800px;
    height: 200px;
}
#content_lm, #content_rm {
    background-color: green;
    width: 200px;
    height: 800px;
}
#content_cm {
    background-color: red;
    width: 800px;
    height: 800px;
}

<div class="main">
    <div class="top    left">  <div id="content_lu"></div></div>
    <div class="top    center"><div id="content_cu"></div></div>
    <div class="top    right"> <div id="content_ru"></div></div>
    <div class="middle left">  <div id="content_lm"></div></div>
    <div class="middle center"><div id="content_cm"></div></div>
    <div class="middle right"> <div id="content_rm"></div></div>
    <div class="bottom left">  <div id="content_lb"></div></div>
    <div class="bottom center"><div id="content_cb"></div></div>
    <div class="bottom right"> <div id="content_rb"></div></div>
</div>

<div class="wrapper">
    <div class="left">
        <div class="top">top</div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot">bot</div>
    </div>
    <div class="center">
        <div class="top">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot"><p>Lorem ipsum dolor sit amet...</p></div>
    </div>
    <div class="right">
        <div class="top">top</div>
        <div class="mid">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        <div class="bot">bot</div>
    </div>
</div>

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    border: 1px dotted gray;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.left {
    position: absolute;
    left: 0;
    width: 200px;
    top: 0;
    bottom:0;
    background-color: yellow;
}
.center {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 0;
    bottom:0;
}
.right {
    position: absolute;
    right: 0;
    width: 200px;
    top: 0;
    bottom:0;
    background-color: yellow;
}
.top {
    position: absolute;
    background-color: cyan;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
}
.mid {
    position: absolute;
    top: 50px;
    bottom: 50px;
    width: 100%;
}
.bot {
    position: absolute;
    background-color: cyan;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100%;
}
p {
    margin: 0;
    height: 100%;
    overflow: auto
}