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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table Column Alignment

    Hello Forum:

    This has been driving me nuts all day and I cant figure out what's going on. I have created two tables one is wrapped in a DIV and used as a header. The second is also wrapped in a DIV which allows me to scroll (hence two tables). The second table is butted up against the bottom of the first. Assuming 5 columns - I am setting the column sizes for each of the tables exactly the same giving plenty of room for the text in each column. The text in the header table is bold. Even though I am setting the column text for the second table the exact same size as its corresponding header, I can't match the column sizes (the broders won't line up). I am building the tables using createElement and sizing the columns using tbObj.size. Any input would be appreciated.
    Attached Images Attached Images  

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table layout

    This is exactly why tables are not meant to be used as a layout instrument; there is no way to reliably set column widths on a table--apart from reintroducing the dreaded spacer gifs--because they will always try to accomodate the content.

    Grid layouts like these can be controlled via CSS and "regular" (non-table) markup; if you can provide a link to the page at hand or an insight into the markup, maybe we can come up with some suggestions.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ronald:

    I am not using the tables for layout instruments, I am using tables bbecause I am displaying a grid of data. Here is an example of what I mean:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style>
    td,tr,table	    {font-family: Tahoma, Verdana,  Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-weight: normal;}
    th				{font-family: Tahoma, Verdana,  Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; font-weight: bold; color: #000000}
    .vmGridDiv{
      border-style: solid;
      border-color: black;
      border-width: 1px;
    }
    .vmGridDivHdr{
      border-style: solid;
      border-color: black;
      border-width: 1px;
      border-bottom-width: 0px;
    }
    .vmGridDivBdy{
      border-style: solid;
      border-color: black;
      border-width: 1px;
      border-top-width: 0px;
    }
    .vmGridCelHdrS{
      border-style: solid;
      border-color: black;
      border-right-width: 1px;
      border-left-width: 0px;
      border-top-width: 0px;
      border-bottom-width: 0px; 
    }
    .vmGridCelHdrLastS{
      border-right-width: 0px;
    }
    .vmGridCelHdr{
      font-style:bold;
      border-style: solid;
      border-color: black;
      border-right-width: 1px;
      border-left-width: 0px;
      border-top-width: 0px;
      border-bottom-width: 0px; 
    }
    .vmGridCelHdrLast{
      border-right-width: 0px;
    }
    .vmGridRowBdyN{
      background-color: #FFFFFF;
      color: black;
    }  
    .vmGridRowBdyO{
      background-color: #DFE9FF;
      color: black;
    }
    .vmGridRowBdyC{
      background-color: blue;
      color: white;
    }
    .vmGridCelBdy{
      border-style: solid;
      border-color: silver;
      border-right-width: 1px;
      border-left-width: 0px;
      border-top-width: 0px;
      border-bottom-width: 1px; 
    }
    .vmGridCelBdyLastCol{
      border-style: solid;
      border-color: silver;
      border-right-width: 0px;
      border-left-width: 0px;
      border-top-width: 0px;  
      border-bottom-width: 1px;   
    }
    .vmGridCelBdyLastRow{
      border-style: solid;
      border-color: silver;
      border-right-width: 1px;
      border-left-width: 0px;
      border-top-width: 0px;  
      border-bottom-width: 0px;   
    }
    .vmGridCelBdyLastRowCol{
      border-style: solid;
      border-color: silver;
      border-right-width: 0px;
      border-left-width: 0px;
      border-top-width: 0px;  
      border-bottom-width: 0px;   
    }
    </style>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body>
    <div id="vmGrid">
        <table width "670" cellspacing="0" cellpadding="2">
    	  <tr >
    	    <th width="100" class="vmGridCelHdr">Header 1</th>
    	    <th width="60" class="vmGridCelHdr">Header 2</th>
    	    <th width="77" class="vmGridCelHdr">Header 3</th>
    	    <th width="200" class="vmGridCelHdr">Header 4</th>
    	    <th width="65" class="vmGridCelHdr">Header 5</th>
    	    <th width="158" class="vmGridCelHdrLast">Header 6</th>										
    	  </tr>
    	</table>
        <table width="670" cellspacing="0" cellpadding="2">
    	  <tr >
    	    <td width="100" class="vmGridCelBdy">data 1:1</td>
    	    <td width="60" class="vmGridCelBdy">data 1:2</td>
    	    <td width="77"  class="vmGridCelBdy">data 1:3</td>
    	    <td width="200"  class="vmGridCelBdy">data 1:4</td>
    	    <td width="65"  class="vmGridCelBdy">data 1:5</td>
    	    <td width="158"  class="vmGridCelBdyLastCol">data 1:6</td>										
    	  </tr>
    	  <tr >
    	    <td width="100" class="vmGridCelBdyLastRow">data 2:1</td>
    	    <td width="60" class="vmGridCelBdyLastRow">data 2:2</td>
    	    <td width="77"  class="vmGridCelBdyLastRow">data 2:3</td>
    	    <td width="200"  class="vmGridCelBdyLastRow">data 2:4</td>
    	    <td width="65"  class="vmGridCelBdyLastRow">data 2:5</td>
    	    <td width="158"  class="vmGridCelBdyLastRowCol">data 2:6</td>										
    	  </tr>	  
    	</table>  
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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