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

Discussion in 'HTML' started by Oliver Hauger, Feb 8, 2006.

  1. 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')">Kopf</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
    Oliver Hauger, Feb 8, 2006
    #1
    1. Advertising

  2. Oliver Hauger

    Bob Guest

    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')">Kopf</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
    Bob, Mar 8, 2006
    #2
    1. Advertising

  3. Oliver Hauger

    Bob Guest

    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')">Kopf</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
    Bob, Mar 8, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Web Developer

    char 8bit wide or 7bit wide in c++?

    Web Developer, Jul 31, 2003, in forum: C++
    Replies:
    2
    Views:
    579
    John Harrison
    Jul 31, 2003
  2. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,803
    Smokey Grindel
    Dec 2, 2006
  3. AAaron123
    Replies:
    6
    Views:
    568
    AAaron123
    Nov 5, 2009
  4. Disc Magnet
    Replies:
    2
    Views:
    706
    Jukka K. Korpela
    May 15, 2010
  5. Disc Magnet
    Replies:
    2
    Views:
    785
    Neredbojias
    May 14, 2010
Loading...

Share This Page