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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    124
    Thanks
    7
    Thanked 0 Times in 0 Posts

    table fixed row height

    I have a table where i want all the row heights and column widths do be fixed. I'm running into issues when the content of a cell is too long to fit in the fixed space. the table then grows to fit the content. consider the following:

    tdoverflow.zip

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
    	<title>tdoverflow</title>
    		<style type="text/css" media="screen">
    			table {
    				width: 200px;				
    			}
    			td {							
    				border-left: 2px solid orange;
    				border-right: 2px solid orange;
    				border-bottom: 1px dashed black;
    			}
    		</style>
    </head>
    
    <body>
    
    	<table cellspacing="0" cellpadding="5">
    		<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    		<tr><td>Data this really long data </td><td></td><td></td><td></td><td></td></tr>
    		<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
    	</table>
    	
    	
    </body>
    
    </html>
    I want every row to be the same height. I tried puting overflow: hidden/visible in td, no luck. i tried making the table a specified height, no luck. i tried making the td and/or tr a specified height and max-height, no luck. i don't want to use colspan because i want the orange bars to remain.

    is there any way to force the table to have fixed row heights and column widths and make the content just overflow over the orange bars?

    thanks!
    Last edited by Duffman12; 03-21-2008 at 06:33 PM. Reason: forgot to add something

  • #2
    Regular Coder Stooshie's Avatar
    Join Date
    Mar 2008
    Location
    Dundee, Scotland
    Posts
    378
    Thanks
    9
    Thanked 39 Times in 39 Posts
    I think the answer is no. You may have to use divs and css. you can then use the overflow tag in css.

    If you use float and clear tags with css and divs you can reproduce table layouts.
    Regards, Stooshie
    O

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    124
    Thanks
    7
    Thanked 0 Times in 0 Posts
    cool. i've implemented what you suggested, works in ff, but it's not working in IE. it's probably the same problem as this: http://www.quirksmode.org/css/overflow.html

    is there a way around this??

    divTable.zip

    Code:
    <html>
    
    <head>
    	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
    	<title>divTable</title>
    	<style type="text/css" media="screen">
    		.table {
    			border: 1px dashed red;
    		}
    		.tr {
    			clear: both;
    		}
    		.td {
    			float: left;
    			width: 100px;		
    			border-width: 1px 5px 1px 0;
    			border-style: solid;
    			border-color: orange;
    			overflow: visible;
    			white-space: nowrap;			
    		}
    		.text {
    			background: white;
    		}
    	</style>
    	
    </head>
    
    <body>
    	
    	<div class="table">
    
    		<div class="tr">
    			<div class="td">Title</div>
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    		</div>
    		<div class="tr">
    			<div class="td">&nbsp;</div>
    			<div class="td"><span class="text">This is a really long title </span></div>
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    		</div>
    		<div class="tr">
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    		</div>
    		
    
    		<div style="clear: both">
    			
    		</div>
    		
    	</div>
    	
    	
    </body>
    
    </html>

  • #4
    Regular Coder Stooshie's Avatar
    Join Date
    Mar 2008
    Location
    Dundee, Scotland
    Posts
    378
    Thanks
    9
    Thanked 39 Times in 39 Posts
    All I can suggest is changing the overflow attribute on the .td class to hidden on your new code.

    It means you don't see the text that overflows, but it keeps your table format intact.

    This now means a choice. You either see the text or keep the table format.
    Regards, Stooshie
    O

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    put divs inside the cells, give them the desired height/width and overflow auto. It will work in all the browsers
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    td div{
    	height:50px;
    	overflow:auto;
    }
    </style>
    </head>
    <body>
    <table width="400" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><div>sfsdff dfsdf sdfsdf dsfsdf d fsdfsd dsfsd dfsd dfsdfsdf fsdf dsf sdf sdf sdf sd f sd fsdfsdf dsfdsd dfsdfsdfsdf</div></td>
        <td><div>sfsdff dfsdf sdfsdf dsfsdf d fsdfsd dsfsd dfsd dfsdfsdf fsdf dsf sdf sdf sdf sd f sd fsdfsdf dsfdsd dfsdfsdfsdf</div></td>
      </tr>
    </table>
    
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Regular Coder
    Join Date
    Oct 2005
    Posts
    124
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Stooshie View Post
    This now means a choice. You either see the text or keep the table format.
    yeah, that's a problem, i need both of those...

    Quote Originally Posted by Kor View Post
    put divs inside the cells, give them the desired height/width and overflow auto. It will work in all the browsers.
    i need the table to stay intact, and i need the content to overflow into the cell to the right staying on one line.

  • #7
    Regular Coder Stooshie's Avatar
    Join Date
    Mar 2008
    Location
    Dundee, Scotland
    Posts
    378
    Thanks
    9
    Thanked 39 Times in 39 Posts
    Quote Originally Posted by Duffman12 View Post
    i need the table to stay intact, and i need the content to overflow into the cell to the right staying on one line.
    In that case I think you will have to use Kor's idea, but have yet another div inside his whose width is 1000px or something, so that they extend to the right within the outer divs.
    Regards, Stooshie
    O

  • #8
    Regular Coder
    Join Date
    Oct 2005
    Posts
    124
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Stooshie View Post
    In that case I think you will have to use Kor's idea, but have yet another div inside his whose width is 1000px or something, so that they extend to the right within the outer divs.
    that works i ff, but alas, ie still won't cooperate

  • #9
    Regular Coder
    Join Date
    Oct 2005
    Posts
    124
    Thanks
    7
    Thanked 0 Times in 0 Posts
    i found a solution for anybody that's interested. I used absolute positioning on the text, and z-index on the .td div.

    Code:
    <html>
    
    <head>
    	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
    	<title>divTable</title>
    	<style type="text/css" media="screen">
    		.table {
    			border: 1px dashed red;
    			table-layout: fixed;
    			border-spacing: 0px;	
    		}
    		.tr {
    			clear: both;
    		}
    
    		.td {
    			position: relative;
    			float: left;
    			width: 150px;
    			height: 1.5em;
    			border-width: 1px 5px 1px 0;
    			border-style: solid;
    			border-color: orange;
    			overflow: visible;
    			white-space: nowrap;
    		}
    		.text {	
    			position: absolute;
    			background: white;
    			overflow: visible;
    			padding: 0 5px;
    		}
    		.front {
    			position: relative;
    			z-index: 100;
    		}
    
    	</style>
    	
    </head>
    
    <body>
    	
    
    	
    	<div class="table">
    
    		<div class="tr">
    			<div class="td front"><span class="text">Title</span></div>
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    		</div>
    		<div class="tr">
    			<div class="td">&nbsp;</div>
    			<div class="td front"><span class="text">This is a really really really really really really reallylong title </span></div>
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    		</div>
    		<div class="tr">
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    			<div class="td">&nbsp;</div>
    		</div>
    		
    
    		<div style="clear: both">
    			
    		</div>
    		
    	</div>
    	
    	
    </body>
    
    </html>

  • #10
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Easy Solution that Absolutely Works

    It sounds silly, but you must insert a <div> in each <td> tag like this:

    <td>
    <div style="height:20px; max-height:20px; min-height:20px; ">
    Your text goes here
    </div>
    </td>
    Obviously, you substitute whatever you want for "20px".

  • #11
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's better to use css in creating tables, cause you can easily adjust their height.


  •  

    LinkBacks (?)

    1. 02-24-2014, 07:08 AM

    Posting Permissions

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