HTML僅滾動一個單元格

我在HTML中遇到問題。我必須創建一個填充整個頁面的表格，所以不需要向下滾動，但會有一個幾乎肯定包含長文本的單元格，因此它必須是可滾動的。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; 
}

來源

2013-12-09 FrontBack

Couldy請你問一個清晰的問題！ – idmean

閱讀此：http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1它給出了爲什麼不使用表佈局的原因。 –

我已經刪除了overflow-y:scroll;爲.questionsList ，並用帶有id o的div來包裝td內容f「滾動」。然後加入這個CSS：#scroll {overflow-y:scroll;height:100%;}

在這裏看到的例子：http://jsfiddle.net/M98wS/3/

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

CSS：

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

來源

2013-12-09 17:44:33 Omega

HTML僅滾動一個單元格

回答

相關問題