how to expand content for a TD to cover 100% of its height (IE)

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • unpresedented
    New Member
    • Feb 2010
    • 11
    #1

    how to expand content for a TD to cover 100% of its height (IE)

    I have a table with one TR and two TDs, one of the TDs has more content (i mean with content: other sub tables) than the other one, this results the following:

    the TD with the little content stay shrinked (its content stay as is, not expanded) and this happens in case of IE only, firefox and google chrome are fine, both of FF and chrome do expand the smaller TD content to fill 100% of that TD's height, my question is how to expand the content of the smaller TD to fill 100% of its height ?

    p.s. I tried to put a DIV with height: 100%; inside the smaller TD but didn't work ...and this is a dynamic code, means that both TDs are changable with their content according to some criteria ...
    look at both screenshots:





    thank you so much in advance
    Tags: css, html
    • JKing
      Recognized Expert Top Contributor
      • Jun 2007
      • 1206
      #2
      Could you post the code that goes along with it?
      Last edited by JKing; Jul 29 '10, 01:21 PM. Reason: grammar

        Comment

        • unpresedented
          New Member
          • Feb 2010
          • 11
          #3
          it's a huge PHP dynamic code ... I used now a method to adjust height on IE using a small piece of javascript code, do you encourage to use javascript in such case ?

          the script is only one line :

          document.getEle mentById('cours e_cell_table0') .style.height = document.getEle mentById('cours e_cell_0').clie ntHeight + 'px';

            Comment

            • johny10151981
              Top Contributor
              • Jan 2010
              • 1059
              #4
              This thing can be achievable by clever cascading of table and CSS no javascript is required at all. take a look at the sample code below
              Code:
              <HTML>
<BODY>
<TABLE>
 <TR>
  <td valign=top>
   <table height=100%>
    <tr>
     <td>name</td>
     <td>johny</td>
    </tr>
    <tr>
     <td>name</td>
     <td>johny</td>
    </tr>
    <tr>
     <td>name</td>
     <td>johny</td>
    </tr>
    <tr>
     <td>name</td>
     <td>johny</td>
    </tr>
   </table>
  </td>
  <td>
   <table height=100%>
    <tr>
     <td>name</td>
     <td>johny</td>
    </tr>
    <tr>
     <td>name</td>
     <td>johny</td>
    </tr>
    <tr>
     <td>name</td>
     <td>johny</td>
    </tr>
    <tr>
     <td>name</td>
     <td>johny</td>
    </tr>
    <tr>
     <td>name</td>
     <td>johny</td>
    </tr>
    <tr>
     <td>name</td>
     <td>johny</td>
    </tr>
   </table>
  </td>
 </TR>
 <tr>
  <td bgcolor="gray">back </td>
  <td bgcolor="gray">back</td>
 </tr>
</TABLE>
</body>
</HTML>
              The above code is nothing compared to your requirement. But I guess i will give you a pretty good idea.

              By the way why dont you keep your application logic and presentation logic in separate file? this is great for bug testing and fixing.

              Best Regards,
              Johny

                Comment

                Previous template Next
                Working...