Pawan Mude Pawan Mude - 1 month ago 9
CSS Question

How to restrict table row height

I've created TABLE mentioned below:

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


In this table; I want to ensure that height of Template (section on right hand side) ; is always equal to height of five ROWS of the table. If data inside template is more, it should come with scroll-bar. But in no case it should go beyond height of five rows of the table. Can you please suggest ?

Answer

You will have to set a fixed height.

Check out this one :-

http://jsfiddle.net/8tFnG/

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