PDA

Click to See Complete Forum and Search --> : Tables - fixed line height

lieutenantDaf
06-23-2005, 07:50 AM
I need to display database rows in a table whith fixed header and scrollable body in IE.
It works quite well using two different tables (the body table being placed in a div) but when there are only a few lines, it looks quite ugly, the lines get very big to fit the entire table size...
I want the lines to stay at the same size event if there are only one or two

Could anyone help me?

I'm sorry this code is a bit long so I put it in an attached file
lieutenantDaf
06-23-2005, 07:53 AM
Itlooks like the file attachment didn't work, here's the code...


<HTML>
<HEAD>
<TITLE>Coppark</TITLE>
<style type="text/css">
table.EltTable { table-layout:fixed; width:98%; height:96%; }
table.TabHeader { table-layout:fixed; width:98%; }
table.TabBody { table-layout:fixed; width:100%; height:100%; }
col.CB { width:5%; }
col.Immo { width:10%; }
col.Serial { width:10%; }
col.Manufacturer { width:20%; }
col.Product { width:30%; }
col.Type { width:25%; }
col.Config { width:25%; }
</style>
</HEAD>
<BODY>
<table class="EltTable" cellpadding="0" cellspacing="0" style="margin:1%;">
<tr>
<td height="40%" style="border:thin solid black">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="20%">
<table class="TabHeader" border="1" cellpadding="0" cellspacing="0">
<colgroup>
<col class="CB">
<col class="Type">
<col class="Immo">
<col class="Product">
<col class="Manufacturer">
<col class="Serial">
</colgroup>
<tr>
<th>&nbsp;</th>
<th>
Type
</th>
<th>
Immo
</th>
<th>
Product
</th>
<th>
Manufacturer
</th>
<th>
Serial
</th>
</tr>
</table>
</td>
</tr>
<tr>
<td height="80%">
<div style="overflow-x:hidden; overflow-y:scroll; width:100%; height:100%;">
<table class="TabBody" border="1" cellpadding="0" cellspacing="0">
<colgroup>
<col class="CB">
<col class="Type">
<col class="Immo">
<col class="Product">
<col class="Manufacturer">
<col class="Serial">
</colgroup>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
<tr>
<td class="fixed">&nbsp;</td>
<td>
Aragorn
</td>
<td>
1002856
</td>
<td>
PC
</td>
<td>
Dell
</td>
<td>
ABG-125-123
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
lieutenantDaf
06-23-2005, 07:54 AM
<tr>
<td height="20%">
<table width="90%" height="100%" cellpadding="0" cellspacing="0">
<colgroup>
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<tr>
<td class="center">
<select name="eltType" onChange="typeChanged( this );">
<option value="2">a</option>
<option value="3">b</option>
<option value="4">c</option>
<option value="1" selected>Unknown</option>
</select>
</td>
<td class="center">
<input type="submit" name="show" value="Free Only"> </td>
<td>&nbsp;</td>
<td class="right">
<button type="submit" name="addRemElt" value="add">
<img src="./data/up_arrow.jpg" alt="Add">
</button>
</td>
<td class="right">
<button type="submit" name="addRemElt" value="remove">
<img src="./data/down_arrow.jpg" alt="Remove">
</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40%" style="border:thin solid black">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="20%">
<table class="TabHeader" border="1" cellpadding="0" cellspacing="0">
<colgroup>
<col class="CB">
<col class="Config">
<col class="Immo">
<col class="Product">
<col class="Manufacturer">
<col class="Serial">
</colgroup>
<tr>
<th>&nbsp;</th>
<th>
Config
</th>
<th>
Immo
</th>
<th>
Product
</th>
<th>
Manufacturer
</th>
<th>
Serial
</th>
</tr>
</table>
</td>
</tr>
<tr>
<td height="80%">
<div style="overflow-x:hidden; overflow-y:scroll; width:100%; height:100%;">
<table class="TabBody" border="1" cellpadding="0" cellspacing="0">
<colgroup>
<col class="CB">
<col class="Config">
<col class="Immo">
<col class="Product">
<col class="Manufacturer">
<col class="Serial">
</colgroup>
<tr>
<td style="height:10px;">&nbsp;</td>
<td>Unknown</td>
<td>123456</td>
<td>libre</td>
<td>Unknown</td>
<td>abcdef</td>
</tr>
<tr>
<td style="height:10px;">&nbsp;</td>
<td>Unknown</td>
<td>123456</td>
<td>used</td>
<td>Unknown</td>
<td>abcdefg</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
byeee
06-23-2005, 09:31 AM
why don't you use [html] ? It's too hard to read.
ffurnai
06-23-2005, 09:35 AM
I think you're just looking for something like this?

<style type="text/css">
tr {
height: 15px;
}
</style>

But I could be misreading your post.
lieutenantDaf
06-23-2005, 03:54 PM
I think you're just looking for something like this?

<style type="text/css">
tr {
height: 15px;
}
</style>

But I could be misreading your post.

Well I tried it indeed, I also tried the line-height property but these wouldn't work, thank you anyway
lieutenantDaf
06-23-2005, 03:55 PM
why don't you use [html] ? It's too hard to read.

Soory, I just didn't know it, I will use it now, thanks :)