如何限制錶行的高度

我創建的表如下所述：如何限制錶行的高度

<html>  
<body> 
    <table border="0" cellspacing="0" cellpadding="1" width="100%"> 
     <colgroup> 
      <col span="1" style="width:5%"> 
       <col span="1" style="width:70%"> 
        <col span="1" style="width:25%"> 
     </colgroup> 
     <tr> 
      <td colspan="2"> 
       <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text 1</div> 
      </td> 
      <td rowspan="5"> 
       <section class="loginform"> 
        <fieldset style="border-radius: 5px; padding: 5px;"> 
         <legend>Template</legend> 
         <ul style="padding: 10px;"> 
          <li>one</li> 
          <li>Two</li> 
          <li>Three</li> 
          <li>Four</li> 
          <li>Five</li> 
         </ul> 
        </fieldset> 
       </section> 
      </td> 
     </tr> 
     <tr> 
      <td>val</td> 
      <td> 
       <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; color:black; border:1px solid #e5e5e5; min-height: 80px;">1 Only</div> 
      </td> 
     </tr> 
     <tr> 
      <td>bal</td> 
      <td> 
       <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">2 only</div> 
      </td> 
     </tr> 
     <tr> 
      <td>nal</td> 
      <td> 
       <div style="width:100%; color:black; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">Both 1 and 2</div> 
      </td> 
     </tr> 
     <tr> 
      <td>dul</td> 
      <td> 
       <div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">Neither 1 nor 2</div> 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
     </tr> 
    </table> 
</body>  
</html>

在此表;我想確保模板的高度（右側的部分）;總是等於表格的五個ROWS的高度。如果模板內的數據更多，它應該帶有滾動條。但絕不應超過表格五行的高度。你能建議嗎？

來源

2013-12-16 Pawan Mude

使用__'max-height'__在__css__ –

我想這與行跨度= 5的TD;但不知何故，它不工作。 –

您必須設置固定的高度。

退房這一個： -

http://jsfiddle.net/8tFnG/

<fieldset style="border-radius: 5px; padding: 5px;height: 450px; border: solid 1px red;">

來源

2013-12-16 11:55:07 Anup

謝謝Anup;如何添加滾動條;如果模板部分中有更多元素？ –

添加溢出：自動到字段集。更新小提琴： - http://jsfiddle.net/8tFnG/1/ – Anup

感謝Anup;它正在工作。 –

試試這個CSS：

<style> 
    fieldset{ height: 450px;overflow-y:hidden;} 
</style>

來源

2013-12-16 11:48:48

我試過了;但不知何故;它沒有給出預期的結果。 –

如果你知道左邊的五個行的高度，你可以「限制」的「模板」字段集的高度，用一個簡單的CSS規則：max-height: 400px; overflow: hidden; overflow-y: scroll;其中400px是表中五行的高度;溢出被隱藏，y軸溢出被設置爲滾動。試試看：

.loginform fieldset{ 
    height: 400px; 
    max-height: 400px; 
    overflow: hidden; 
    overflow-y: scroll; 
}

另一個選擇是使用JavaScript。您可以找出包含五行的表格的高度，然後調整頁面加載時「模板」字段集的高度。

希望這會有所幫助。

來源

2013-12-16 11:50:55 rand0m

謝謝你;它的工作完美;在Anup接受了他的回答之後，我嘗試了這個。感謝您提前理解。 –

添加位置：固定到元素

來源

2013-12-16 11:55:04 nareeboy

如何限制錶行的高度

回答

相關問題