SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Cell Sizes

Hybrid View

  1. #1
    SitePoint Enthusiast andrewau's Avatar
    Join Date
    Sep 2004
    Location
    Australia
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cell Sizes

    Hi,

    I have a table with 4 cells. I would like to make each cell of equal height and width. I have set the properties for the cells for the specific size. However, when I add content to the cells, they go over the width or the lenght that I want them to stay. How can I properly control this through CSS?

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Not using table much these days I'd probably do something like this but it may be the wrong way to go about it

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    td{ border:1px solid #000;}
    .cell{
     height:100px;
     width:100px; 
     vertical-align:top;
     overflow:auto;
    }
    
    </style>
    </head>
    <body>
    <table>
      <tr> 
    	<td> <div class="cell"> 
    		<p>Hello1</p>
    		<p>1</p>
    		<p>2</p>
    		<p>2</p>
    		<p>4</p>
    		<p>5</p>
    		<p>6</p>
    		<p>7</p>
    		<p>8</p>
    		<p>9</p>
    		<p>0</p>
    	  </div></td>
    	<td> <div class="cell">Hello</div></td>
      </tr>
      <tr> 
    	<td> <div class="cell">Hello</div></td>
    	<td> <div class="cell">Hello</div></td>
      </tr>
    </table>
    </body>
    </html>
    You need to decide what you want to happen to the content that excedes the cell height. In the above example scrollbars will appear but you could set the overflow to hidden if you want.

    Paul


Bookmarks

Posting Permissions

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