Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    Hi,
    I have a table that I am displaying as a calendar. I want all the cell sizes to be fixed width and height no matter how long one cell might contain alonger than usual text. Is it okay if that entry does not apear for that cell. I specified certain width and height for the table tr and td but although the width seems to be fixed, the height still adjusts itself dynamically (even though I specified a height) if that cell's text is long. How can I ensure fixed cell width and height?

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Hi ketanco.

    To help you understand this, you should know how the width works. Lets say your <td> has a width of 100px and the content (text in your case) of that td is 90px wide. Then you add 20px worth of text and so the width kicks in as a boundary, the surplus (surplus is > your width) will take a newline all by itself.

    Now, the height issue.

    You can use the CSS property overflow (link) to dictate what happens to surplus content. The overflow property accepts values such as hidden (the surplus is hidden and there is no scrollbar), scroll (a scrollbar is used to see the surplus content), auto (same as scroll only if the content is clipped/cut off) and visible which is the default.

    With that in mind, we need to set some CSS to give your td's a width and height, and what to do with surplus content. From your post I think you want to clip any content which is more than your td height so you will want to use overflow: hidden; however you should be able to use whichever overflow value which you wish to.

    With that in mind, heres a small example:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    
    	<title>Td Height Issue</title>
    
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    	<style type="text/css">
    
    		table td p
    		{
    			width: 50px;
    			height: 50px;
    			overflow: hidden;
    		}
    
    	</style>
    
    </head>
    
    <body>
    
    	<table>
    			<tr>
    				<td><p>Test Td1</p></td>
    				<td><p>Test Td2</p></td>
    				<td><p>Test Td3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque non orci. Vestibulum erat. Cras eget turpis eu elit dignissim 
    				tristique. Ut in nisl. Aenean urna dui, varius et, scelerisque a, consectetuer sit amet, risus. Sed et nisi sed magna pharetra vulputate. 
    				Fusce at ligula. Aliquam erat volutpat. Aliquam accumsan facilisis augue. Phasellus condimentum viverra lectus.</p></td>
    			</tr>
    	</table>
    
    </body>
    </html>
    Hope that helps.


Remove Ads

Posting Permissions

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

Search tags for this page

html fixed cell size

,
html fixed size cell
,
html fixed size table cell
,
table with empty cell fixed size
Click on a term to search for related topics.
All times are GMT -6. The time now is 09:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com