Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Why is my table column with hidden content still 50px wide?

Reply
Thread Tools

Why is my table column with hidden content still 50px wide?

 
 
Oliver Hauger
Guest
Posts: n/a
 
      02-08-2006
Hello,

for my web application I need the following basic layout:
A header row which takes the complete screen width. Below that header row I need
3 columns
next to each other. It should be possible to hide the right column so that the
center column
consumes the whole remaining width.
As you can see in my example code I use a table where every table cell contains
a division.
My problem now is that if hide the division in the right column the column still
have a width
of about 50px. Does anyone have an idea how I can achieve that the right column
consumes no
space in horizontal direction if the inner division is hidden?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testframe</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
</style>
<script type="text/javascript">
function toggleDisplayBlockElement(elementId)
{
var contextElement = document.getElementById(elementId);
if (contextElement.style.display == "block") {
contextElement.style.display = "none";
} else {
contextElement.style.display = "block";
}
}
</script>
</head>
<body>
<table style="width:100%;" border="1px">
<tr>
<td colspan="3">
<div id="kopf" style="border:2px solid black;"
onclick="toggleDisplayBlockElement('preview')">Kop f</div>
</td>
</tr>
<tr>
<td style="width:150px; vertical-align:top;">
<div style="width:150px; height:1000px; border:2px solid blue;">Menü</div>
</td>
<td style="vertical-align:top;">
<div style="height:500px; border:2px solid green;">Inhalt</div>
</td>
<td style="vertical-align:top;">
<div id="preview" style="display:none; border:2px solid red;"></div>
</td>
</tr>
</table>
</body>
</html>

Thanx in advance!
Oli

 
Reply With Quote
 
 
 
 
Bob
Guest
Posts: n/a
 
      03-08-2006
up
Oliver Hauger wrote:
> Hello,
>
> for my web application I need the following basic layout:
> A header row which takes the complete screen width. Below that header rowI need
> 3 columns
> next to each other. It should be possible to hide the right column so that the
> center column
> consumes the whole remaining width.
> As you can see in my example code I use a table where every table cell contains
> a division.
> My problem now is that if hide the division in the right column the column still
> have a width
> of about 50px. Does anyone have an idea how I can achieve that the right column
> consumes no
> space in horizontal direction if the inner division is hidden?
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <title>Testframe</title>
> <style type="text/css">
> *{
> margin:0;
> padding:0;
> }
> </style>
> <script type="text/javascript">
> function toggleDisplayBlockElement(elementId)
> {
> var contextElement if (contextElement.style.display = "block") {
> contextElement.style.display } else {
> contextElement.style.display }
> }
> </script>
> </head>
> <body>
> <table style="width:100%;" border="1px">
> <tr>
> <td colspan="3">
> <div id="kopf" style="border:2px solid black;"
> onclick="toggleDisplayBlockElement('preview')">Kop f</div>
> </td>
> </tr>
> <tr>
> <td style="width:150px; vertical-align:top;">
> <div style="width:150px; height:1000px; border:2px solid blue;">Menü</div>
> </td>
> <td style="vertical-align:top;">
> <div style="height:500px; border:2px solid green;">Inhalt</div>
> </td>
> <td style="vertical-align:top;">
> <div id="preview" style="display:none; border:2px solid red;"></div>
> </td>
> </tr>
> </table>
> </body>
> </html>
>
> Thanx in advance!
> Oli


 
Reply With Quote
 
 
 
 
Bob
Guest
Posts: n/a
 
      03-08-2006
up
Oliver Hauger wrote:
> Hello,
>
> for my web application I need the following basic layout:
> A header row which takes the complete screen width. Below that header rowI need
> 3 columns
> next to each other. It should be possible to hide the right column so that the
> center column
> consumes the whole remaining width.
> As you can see in my example code I use a table where every table cell contains
> a division.
> My problem now is that if hide the division in the right column the column still
> have a width
> of about 50px. Does anyone have an idea how I can achieve that the right column
> consumes no
> space in horizontal direction if the inner division is hidden?
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <title>Testframe</title>
> <style type="text/css">
> *{
> margin:0;
> padding:0;
> }
> </style>
> <script type="text/javascript">
> function toggleDisplayBlockElement(elementId)
> {
> var contextElement if (contextElement.style.display = "block") {
> contextElement.style.display } else {
> contextElement.style.display }
> }
> </script>
> </head>
> <body>
> <table style="width:100%;" border="1px">
> <tr>
> <td colspan="3">
> <div id="kopf" style="border:2px solid black;"
> onclick="toggleDisplayBlockElement('preview')">Kop f</div>
> </td>
> </tr>
> <tr>
> <td style="width:150px; vertical-align:top;">
> <div style="width:150px; height:1000px; border:2px solid blue;">Menü</div>
> </td>
> <td style="vertical-align:top;">
> <div style="height:500px; border:2px solid green;">Inhalt</div>
> </td>
> <td style="vertical-align:top;">
> <div id="preview" style="display:none; border:2px solid red;"></div>
> </td>
> </tr>
> </table>
> </body>
> </html>
>
> Thanx in advance!
> Oli


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
In FF the top is at 50px realative to the div top but in IE8 it's at 100 AAaron123 ASP .Net 6 11-05-2009 08:08 PM
findcontrol("PlaceHolderPrice") why why why why why why why why why why why Mr. SweatyFinger ASP .Net 2 12-02-2006 03:46 PM
Problem with comparing a Table View Column with the Table Column? savvy ASP .Net 1 01-18-2006 03:04 PM
Body hidden, but table borders still visible. NeverLift Javascript 4 05-30-2004 01:06 AM
Body hidden, but table borders still visible. NeverLift Javascript 0 05-29-2004 07:00 PM



Advertisments