【发布时间】：2014-05-19 22:48:56
【问题描述】：
意图
- 我想使用所有可用的水平和垂直空间（也就是说整个浏览器窗口减去边距和页眉等）绘制一个表格。
- 调整浏览器窗口大小时，表格应动态调整大小。
- 它不应该比页面更宽或更长，如果内容大于单元格，它应该滚动内容。这些单元格在下图中用箭头标记。
- 在一个方向上没有箭头的单元格既不能改变它们的大小，也不能在那个方向滚动，而是固定的。因此，表头应该只会变宽或变窄，左右条纹只会改变它们的长度。
.
顺便说一句：我正在寻找纯 CSS/HTML 解决方案？
天真的尝试
我以为它会是 HTML 101：Example，但表格只会增长，直到显示整个内容，高度/宽度大小被忽略 css：
/* structure */
table {
width: 80%;
margin-left: 10%;
height: 80%;
}
.right, .left {
width: 200px;
}
.thead > td, .tfoot > td {
height: 200px;
}
.center, .tbody > td {
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;
}
和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>
Div-Try
我能够满足第一行的所有条件，使用绝对定位的角 div 和使用 margin-left 和 -right 的中心 div 将其装箱到父 div 中。但我不能定位例如最后一个居中的 div 因为绝对定位它不会被父 div 绑定。 Example
css:
/* 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;
}
html:
<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>
【问题讨论】：
-
您是在直接询问您的问题的答案！！，而不是展示您尝试了什么，如果您向我们展示您所做或尝试过的事情，我们将不胜感激，这样我们就可以开始帮助您那里
-
@hoffmann：你的意思是：jsfiddle.net/abhitalks/VsA33/1？
-
webkit-scroll是您的答案。但并非所有浏览器都支持。但是您可以通过 css2 实现这一点，通过创建两个元素，外部元素 `overflow:hidden' 和内部元素设置为 'overflow:scroll' -
@AtalShrivastava 什么是“webkit-scroll”？我只发现 webkit-overflow-scrolling 似乎只对触摸设备很重要。
-
@abhitalks 该示例不会垂直滚动，也不会垂直扩展。
标签： html css html-table