我在HTML中遇到了问题。我必须创建一个填满整个页面的表,所以你不需要向下滚动它,但是会有一个几乎肯定包含长文本的单元格,所以它必须是可滚动的。
表格的结构如下:
+------------------------------------------+
| Space 1 (fixed height, 20px, 100% width) |
|------------------------------------------|
| Space 2 | |
| 25% width | Space 3 |
| Scrollable | Fills the remaining space |
| | |
| | |
| | |
| | |
| | |
| | |
| |---------------------------|
| | Space 4 (20px height) |
+------------------------------------------+
到目前为止,我已完成此代码:http://jsfiddle.net/M98wS/2
<table class="questionsTable">
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="25%" />
<tr>
<td class="questionTitle" height="20px" colspan="4">Space 1 (fixed height, 20px)</td>
</tr>
<tr>
<td class="questionsList" rowspan="2">Space 2 (scrollable, 25% width, fixed height in page)
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>
</td>
<td height="auto" colspan="3">Space 3 (fills the remaining space)</td>
</tr>
<tr>
<td class="questionActions" height="20px" colspan="4">Space 4 (fixed height, 20px)</td>
</tr>
html, body {
margin:0;
padding:0;
height:100%;
border:none;
}
table, td {
border: 1px solid black;
}
.questionsTable {
width: 100%;
height: 100%;
}
.questionsList {
overflow-x: auto;
overflow-y: scroll;
}
.questionTitle .questionActions {
overflow: hidden;
height: 20px;
}
答案 0 :(得分:0)
我删除了overflow-y:scroll;
的{{1}},并使用id为“scroll”的div包装了td内容。然后添加了这个css:.questionsList
请参阅此处的示例:http://jsfiddle.net/M98wS/3/
HTML:
#scroll {overflow-y:scroll;height:100%;}
CSS:
<table class="questionsTable">
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="25%" />
<tr>
<td class="questionTitle" height="20px" colspan="4">Space 1 (fixed height, 20px)</td>
</tr>
<tr>
<td class="questionsList" rowspan="2">
<div id="scroll">
Space 2 (scrollable, 25% width, fixed height in page)
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>
</div>
</td>
<td height="auto" colspan="3">Space 3 (fills the remaining space)</td>
</tr>
<tr>
<td class="questionActions" height="20px" colspan="4">Space 4 (fixed height, 20px)</td>
</tr>
</table>