943,767 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Table height
Ad:
Permalink
Jun 5th, 2009
0

Table height

Expand Post »
hi, does anyone knows a workaround on this: I have this code, but the syntax is deprecated already. what i want is to display the whole length of the table.. but if i keep adding contents to the table i need to increase the height value.. i'm doing the wrong thing..but it displays fine in IE7.. but is there any work around on this.. please help.. thank you..
HTML and CSS Syntax (Toggle Plain Text)
  1. <div id="maintable">
  2. <table border="0" cellpadding="0" cellspacing="0"  width="850px" height="800px" >
  3.     <tr bgcolor="#55aaff" >    
  4. 	<td align="top"> {
Last edited by cguan_77; Jun 5th, 2009 at 5:47 am.
Similar Threads
Reputation Points: 19
Solved Threads: 115
Nearly a Posting Virtuoso
cguan_77 is offline Offline
1,317 posts
since Apr 2007
Permalink
Jun 5th, 2009
0

Re: Table height

Simple table layout sample: controlling table layout using CSS and also serves as a valid XHTML 1.0 Strict document.

HTML and CSS Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <?xml-stylesheet type="text/css" href="#internal" media="all"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <title>Table Layout Sample</title>
  11. <style id="internal" type="text/css" media="all">
  12. /* <![CDATA[ */
  13. html, body {
  14.   border : none;
  15.   font : normal normal normal 95%/1.4 Verdana, Arial, sans-serif;
  16.   height : auto;
  17.   min-height : 600px;
  18.   margin : 0;
  19.   padding : 0;
  20.   text-align : center;
  21.   width : auto; }
  22.  
  23. body {
  24.   background-color : #f0f0f0;
  25.   color : #506070; }
  26.  
  27. table {
  28.   border : none;
  29.   border-collapse : collapse;
  30.   height : inherit;
  31.   min-height : 600px;
  32.   width : 100% !important; }
  33.  
  34. td, tr {
  35.   border : none;
  36.   padding : 0; }
  37.  
  38.  
  39. td {
  40.   width : 100% !important;
  41.   vertical-align : middle !important; }
  42.  
  43. div {
  44.   border : none;
  45.   margin : 0;
  46.   padding : 0; }
  47.  
  48. div#main {
  49.   margin : 0 auto;
  50.   clear : both;
  51.   height : inherit;
  52.   min-height : 600px;
  53.   width : 100%; }
  54.  
  55. div#MyDiv {
  56.   margin : 0 auto;
  57.   height : 200px !important;
  58.   min-height : 200px;
  59.   max-height : 201px;
  60.   min-width : 400px;
  61.   max-width : 401px;
  62.   width : 400px !important; }
  63.  
  64. div#MyDiv div.tube {
  65.   background-color : #f7f7f7;
  66.   border : 1px solid #ccc;
  67.   padding : 1em;
  68.   height : inherit;
  69.   text-align : center;
  70.   overflow: hidden; }
  71.  
  72. /* ]]> */
  73. </style>
  74. </head>
  75. <body>
  76. <div id="main">
  77. <table id="myTable" frame="void" rules="none" summary="Controlling table layout in CSS">
  78. <tr><td>
  79. <div id="MyDiv"><div class="tube">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div></div></td></tr>
  80. </table>
  81. </div> 
  82. </body>
  83. </html>

hope it helps...
Last edited by essential; Jun 5th, 2009 at 6:39 am.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jun 5th, 2009
0

Re: Table height

Another example of using all table properties to control its layout and at the same time keeping the whole document valid.

html Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <?xml-stylesheet type="text/css" href="#internal" media="all"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <title>Complete Table Properties: Usage Example</title>
  11. <style id="internal" type="text/css" media="all">
  12. /* <![CDATA[ */
  13. html, body {
  14.   border : none;
  15.   font : normal normal normal 95%/1.4 Verdana, Arial, sans-serif;
  16.   height : auto;
  17.   min-height : 600px;
  18.   margin : 0;
  19.   padding : 0;
  20.   text-align : center;
  21.   width : auto; }
  22.  
  23. div {
  24.   border : none;
  25.   margin : 0;
  26.   padding : 0; }
  27.  
  28. div#main {
  29.   margin : 0 auto;
  30.   clear : both;
  31.   height : inherit;
  32.   min-height : 600px;
  33.   width : 100%; }
  34.  
  35.  
  36. /* ]]> */
  37. </style>
  38. </head>
  39. <body>
  40. <div id="main">
  41. <table title="Valid Table Properties using XHTML 1.0 Strict" dir="ltr" lang="en-US" xml:lang="en-US" id="maintable" style="height : 800px; margin : 0 auto;" width="100%" border="1" cellpadding="4" cellspacing="4" frame="border" rules="all" summary="Complete Table properties">
  42. <caption>Complete Table properties example</caption>
  43. <colgroup style="background-color : #eee;" align="left">
  44. <col style="background-color : #aaa;" valign="middle" align="center" width="20%" />
  45. <col valign="middle" align="center" width="80%" />
  46. </colgroup>
  47. <thead>
  48. <tr><th>Table Header</th><td>ROW1</td></tr>
  49. </thead>
  50. <tfoot>
  51. <tr><th>Table Footer</th><td>ROW3</td></tr>
  52. </tfoot>
  53. <tbody>
  54. <tr><th>Table Body</th><td>ROW2</td></tr>
  55. </tbody>
  56. </table>
  57. </div> 
  58. </body>
  59. </html>
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Jun 8th, 2009
0

Re: Table height

Set the height of the cells, rather than the table.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Jun 8th, 2009
0

Re: Table height

thanks for the ideas
Reputation Points: 19
Solved Threads: 115
Nearly a Posting Virtuoso
cguan_77 is offline Offline
1,317 posts
since Apr 2007
Permalink
Jun 8th, 2009
0

Re: Table height

@ MidiMagic,

Don't you have anything to say, asside from commenting every post?

Just try to put a little effort on it, rather than providing self belief solutions...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: 100% height issue
Next Thread in HTML and CSS Forum Timeline: Want to give Fix size to select box???





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC