Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I make a nested inner table occupy the full height of the containing cell?

    I've got some nested tables. I want the inner tables to occupy the full height of the containing cell in the outer table, even if there is not enough information in the inner table to force it to do so (I just want the inner table, or maybe the bottom row of the inner table, to expand with white space to fill the space available). Of course, if the inner table needs to be higher than the containing cell, I want the containing cell's row to expand as necessary (as it does now).

    How do I do this? I seem to have tried every combination of height=100% in the html elements and in the CSS style definitions without success.

    Here is my html:
    Code:
      <tr>
        <td>8</td>
        <td>8</td>
        <td>Wheeler</td>
        <td>Time Becomes a Song: 1 Clock-a-clay</td>
        <td class="contains-table"><table class="inner" cellspacing="0">
          <tr>
            <td class="res"><a href="music/midi/Wheeler_ClockAClay.mid">Midi</a></td>
            <td class="sou">Janet</td>
          </tr>
          <tr>
            <td class="res"><a href="music/midi/Wheeler_ClockAClay_S.mid">Midi (S)</a></td>
            <td class="sou">Janet</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td>9</td>
        <td>9</td>
        <td>Wheeler</td>
        <td>Time Becomes a Song: 2. No single hour can stand for nought</td>
        <td class="contains-table"><table class="inner" cellspacing="0" height="100%">
          <tr height="100%">
            <td class="res" height="100%"><a href="music/midi/Wheeler_NoSingleHour.mid">Midi</a></td>
            <td class="sou" height="100%">Janet</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td>Wheeler</td>
        <td>Time Becomes a Song: 3. O wert thou in the storm</td>
        <td class="contains-table"><table class="inner" cellspacing="0">
          <tr>
            <td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm.mid">Midi (TTBB)</a></td>
            <td class="sou">Janet</td>
          </tr>
          <tr>
            <td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm_SATB.mid">Midi (SATB)</a></td>
            <td class="sou">Janet</td>
          </tr>
        </table></td>
      </tr>
    Here is what it looks like:


    Note that the right hand two cells in row 9 are not high enough to fill the space available, meaning that the bottom boundary is in the wrong place. Rows 8 and 10 are correct, because in these cases the inner table is naturally as high as or higher than the natural height of the containing cell.

    And here is the relevant section of my stylesheet:
    Code:
    table.sortable {
       padding: 0px; 
       margin: 0px; 
       border: solid; 
       border-top-color: #c0c0c0; 
       border-bottom-color: #808080; 
       border-left-color: #c0c0c0; 
       border-right-color: #808080; 
       border-width: 1px;
    }
    table.inner {
       width: 100%; 
       border-width: 0px; 
       padding: 0px; 
       margin: 0px;
    }
    table.sortable th, table.sortable td, table.inner td {
       padding: 3px; 
       margin: 0px; 
       border: solid; 
       border-top-color: #808080; 
       border-bottom-color: #c0c0c0; 
       border-left-color: #808080; 
       border-right-color: #c0c0c0; 
       border-width: 1px; 
       text-align: left;
       vertical-align: top;
    }
    table.sortable td.contains-table  {
       border-width: 0px; 
       text-align: center; 
       padding: 0px; 
       margin: 0px;
    }
    td.res {
       width: 25%;
    }
    td.sou {
       width: 75%;
    }
    I hope someone can suggest how to do this!

    Thanks - Rowan

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    I think something is missing.

    When I combine your code and stylesheet into a single page, it does not display in the same way as your image:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang='en'>
    <head>
    <meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
    <title>Inner Table</title>
    <style type="text/css">
    table.sortable {
       padding: 0px; 
       margin: 0px; 
       border: solid; 
       border-top-color: #c0c0c0; 
       border-bottom-color: #808080; 
       border-left-color: #c0c0c0; 
       border-right-color: #808080; 
       border-width: 1px;
    }
    table.inner {
       width: 100%; 
       border-width: 0px; 
       padding: 0px; 
       margin: 0px;
    }
    table.sortable th, table.sortable td, table.inner td {
       padding: 3px; 
       margin: 0px; 
       border: solid; 
       border-top-color: #808080; 
       border-bottom-color: #c0c0c0; 
       border-left-color: #808080; 
       border-right-color: #c0c0c0; 
       border-width: 1px; 
       text-align: left;
       vertical-align: top;
    }
    table.sortable td.contains-table  {
       border-width: 0px; 
       text-align: center; 
       padding: 0px; 
       margin: 0px;
    }
    td.res {
       width: 25%;
    }
    td.sou {
       width: 75%;
    }
    </style>
    </head>
    <body>
    <h1>Inner Table</h1>
    <table class="sortable" cellspacing='0'>
      <tr>
        <td>8</td>
        <td>8</td>
        <td>Wheeler</td>
        <td>Time Becomes a Song: 1 Clock-a-clay</td>
        <td class="contains-table"><table class="inner" cellspacing="0">
          <tr>
            <td class="res"><a href="music/midi/Wheeler_ClockAClay.mid">Midi</a></td>
            <td class="sou">Janet</td>
          </tr>
          <tr>
            <td class="res"><a href="music/midi/Wheeler_ClockAClay_S.mid">Midi (S)</a></td>
            <td class="sou">Janet</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td>9</td>
        <td>9</td>
        <td>Wheeler</td>
        <td>Time Becomes a Song: 2. No single hour can stand for nought</td>
        <td class="contains-table"><table class="inner" cellspacing="0" height="100%">
          <tr height="100%">
            <td class="res" height="100%"><a href="music/midi/Wheeler_NoSingleHour.mid">Midi</a></td>
            <td class="sou" height="100%">Janet</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td>Wheeler</td>
        <td>Time Becomes a Song: 3. O wert thou in the storm</td>
        <td class="contains-table"><table class="inner" cellspacing="0">
          <tr>
            <td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm.mid">Midi (TTBB)</a></td>
            <td class="sou">Janet</td>
          </tr>
          <tr>
            <td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm_SATB.mid">Midi (SATB)</a></td>
            <td class="sou">Janet</td>
          </tr>
        </table></td>
      </tr>
    </table>
    </body>
    </html>
    That said, my advice would be to do away with the inner tables, and instead use rowspans on the left-hand columns, as in:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang='en'>
    <head>
    <meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
    <title>Rowspans instead of Inner Table</title>
    <style type="text/css">
    table.sortable {
       padding: 0px; 
       margin: 0px; 
       border: solid; 
       border-top-color: #c0c0c0; 
       border-bottom-color: #808080; 
       border-left-color: #c0c0c0; 
       border-right-color: #808080; 
       border-width: 1px;
    }
    table.sortable th, table.sortable td {
       padding: 3px; 
       margin: 0px; 
       border: solid; 
       border-top-color: #808080; 
       border-bottom-color: #c0c0c0; 
       border-left-color: #808080; 
       border-right-color: #c0c0c0; 
       border-width: 1px; 
       text-align: left;
       vertical-align: top;
    }
    td.res {
       width: 10%;
    }
    td.sou {
       width: 30%;
    }
    </style>
    </head>
    <body>
    <h1>Rowspans instead of Inner Table</h1>
    <table class="sortable" cellspacing='0'>
      <tr>
        <td rowspan="2">8</td>
        <td rowspan="2">8</td>
        <td rowspan="2">Wheeler</td>
        <td rowspan="2">Time Becomes a Song: 1 Clock-a-clay</td>
        <td class="res"><a href="music/midi/Wheeler_ClockAClay.mid">Midi</a></td>
        <td class="sou">Janet</td>
      </tr>
      <tr>
        <td class="res"><a href="music/midi/Wheeler_ClockAClay_S.mid">Midi (S)</a></td>
        <td class="sou">Janet</td>
      </tr>
      <tr>
        <td>9</td>
        <td>9</td>
        <td>Wheeler</td>
        <td>Time Becomes a Song: 2. No single hour can stand for nought</td>
        <td class="res" height="100%"><a href="music/midi/Wheeler_NoSingleHour.mid">Midi</a></td>
        <td class="sou" height="100%">Janet</td>
      </tr>
      <tr>
        <td rowspan="2">10</td>
        <td rowspan="2">10</td>
        <td rowspan="2">Wheeler</td>
        <td rowspan="2">Time Becomes a Song: 3. O wert thou in the storm</td>
        <td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm.mid">Midi (TTBB)</a></td>
        <td class="sou">Janet</td>
      </tr>
      <tr>
        <td class="res"><a href="music/midi/Wheeler_OWertThouInTheStorm_SATB.mid">Midi (SATB)</a></td>
        <td class="sou">Janet</td>
      </tr>
    </table>
    </body>
    </html>
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •