HTML仅滚动一个单元格

我在HTML中遇到了一个问题。我必须制作一个表格来填充整个页面，所以你不需要向下滚动，但是有一个单元格几乎肯定会包含长文本，所以它必须是可滚动的

表格的结构如下所示：

+------------------------------------------+
| Space 1 (fixed height, 20px, 100% width) |
|------------------------------------------|
| Space 2      |                           |
| 25% width    | Space 3                   |
| Scrollable   | Fills the remaining space |
|              |                           |
|              |                           |
|              |                           |
|              |                           |
|              |                           |
|              |                           |
|              |---------------------------|
|              | Space 4 (20px height)     |
+------------------------------------------+

到目前为止，我已经完成了以下代码：

---

我已经删除了

overflow-y:scroll

用于

.questionsList

，并用id为“scroll”的div包装td内容。然后添加了这个css:

#scroll{overflow-y:scroll；height:100%；}

请参见此处的示例：

HTML:

---

你能问个清楚的问题吗！阅读：它给出了不使用表格进行布局的原因。

<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;
}

<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>

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;
}
.questionTitle .questionActions {
    overflow: hidden;
    height: 20px;
}
#scroll {overflow-y:scroll;height:100%;}