Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table Column Alignment

Status
Not open for further replies.
Elcid32

Elcid32

Programmer
Jul 28, 2006
10
US
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 tdOBJ.width. Any input would be appreciated.
 
Sort by date Sort by votes
Seeing some code would help us help you. Without that we can only gas what could be wrong.
 
Upvote 0 Downvote
The first code segment builds the table header:
Code: 
this.buildHeadr = function(){
  var bdyDiv, tblDiv, tblObj, tblBdy, tblRow, tblCol,
      tblCel,tblTxt;  
  bdyDiv = document.getElementById(this.parentdiv);
  tblDiv = this.registerDiv("vmGridHdr");
  tblDiv.className="vmGridDivHdr";
  tblDiv.style.width = this.tablesize+2;
  tblObj = tblDiv.getElementsByTagName('table');
  for(i=0;i<tblObj.length;i++){
    tblObj[i].parentNode.removeChild(tblObj[i]);
  }
  tblObj = document.createElement('table');
  tblObj.id=this.parentdiv+"Table"	
  tblObj.cellSpacing = 0;
  tblObj.cellPadding = 2;
  tblObj.width=this.tablesize;
  tblBdy = document.createElement('tbody');
  tblRow = document.createElement('tr');
  tblRow.className="vmGridRowHdr";
  for(i=1;i<this.columncount;i++){
    tblCel = document.createElement('td');
    tblCel.style.width = this.columnsize[i]
    if((i+1) < this.columncount){
      tblCel.className="vmGridCelHdr";
    }else{
      tblCel.className="vmGridCelHdrLast";
    }
    tblTxt = document.createTextNode(this.columnname[i]);
    tblCel.appendChild(tblTxt);
    tblRow.appendChild(tblCel);
  }
  tblBdy.appendChild(tblRow);
  tblObj.appendChild(tblBdy);  	  
  tblDiv.appendChild(tblObj);
  bdyDiv.appendChild(tblDiv);
  this.vmSetTableEvents(tblObj);
}

The follow segment builds the table with associated data:
Code: 
this.buildTable = function(){
  var bdyDiv, tblDiv, tblObj, tblBdy, tblRow, tblCol,
      tblCel,tblTxt,tblImg,divOffSet=0;
  bdyDiv = document.getElementById(this.parentdiv);
  tblDiv = this.registerDiv("vmGridBdy");
  tblDiv.style.width = this.tablesize;		
  tblDiv.className="vmGridDivBdy";
  if(this.nonav){
    tblDiv.style.overflow="auto";
    tblDiv.style.height = this.tableheight;
    tblDiv.style.width = this.tablesize+2
    this.upperlimit = this.dataQUE.length;	  
    if(this.upperlimit < Math.floor(this.tableheight/18)-1){
      divOffSet = 0;
      this.upperlimit=Math.floor(this.tableheight/18)-1;
    }else{
      divOffSet = 20;	
    }  
  }
  tblObj = tblDiv.getElementsByTagName('table');
  for(i=0;i<tblObj.length;i++){
    tblObj[i].parentNode.removeChild(tblObj[i]);
  }
  tblObj = document.createElement('table');
  tblObj.cellSpacing = 0;
  tblObj.cellPadding = 2;
  tblObj.width = this.tablesize;	
  tblObj.id=this.parentdiv+"Table"
  tblBdy = document.createElement('tbody');
  tblRow = document.createElement('tr');
  tblRow.className="vmGridRowHdr";	
  for(i=0;i<this.upperlimit;i++){
    if(i<this.dataQUE.length){
      tblCol = this.dataQUE[i].split("\t");
    }
    tblRow = document.createElement('tr');
    tblRow.className = "vmGridRowBdyN";  
    for(j=1;j<this.columncount;j++){
      tblCel = document.createElement('td');
      tblCel.height=18;
      tblCel.width = this.columnsize[j];
      if((i+1) < this.upperlimit){
        if((j+1) < this.columncount){
          tblCel.className = "vmGridCelBdy";
        }else{
          tblCel.className = "vmGridCelBdyLastCol";
          tblCel.style.width = this.columnsize[j]-divOffSet;
        }
      }else{
        if((j+1) < this.columncount){
          tblCel.className = "vmGridCelBdyLastRow";
        }else{
          tblCel.className = "vmGridCelBdyLastRowCol";
          tblCel.style.width = this.columnsize[j]-divOffSet;
        }
      }
      tblCel.align = this.columnalign[j];
      if(i<this.dataQUE.length && tblCol[0]){
        tblTxt = document.createTextNode(tblCol[j]);
        if(i==0){
          tblRow.className = "vmGridRowBdyC";
          this.recordid= tblCol[0];
          this.rowselected = 0;
        }		  
      } else {
        tblTxt = document.createTextNode(" ");
      }	      
      tblCel.appendChild(tblTxt);
      tblRow.appendChild(tblCel);
      tblBdy.appendChild(tblRow);
    }	
  }
  tblObj.appendChild(tblBdy);  	  
  tblDiv.appendChild(tblObj);
  bdyDiv.appendChild(tblDiv);
}
 
Upvote 0 Downvote
why are so many people building their websites with javascript recently?


Elcid32,

You need to understand that if you want help, we need to be able to determine what is wrong. please provide some useable code so we don't have to guess how you're implementing your solution. if you give a mechanic your car, it will be much easier for him to determine what's wrong, rather than saying "my car won't start"...



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Clflava:

The code I provided is not usable? It is the code I am using to build my tables.
 
Upvote 0 Downvote
I just threw this together but if you look at column 4 and 5, the right borders are not lining up with the borders in the header table. In some of my tables, the borders are off quite a bit.

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;
}
.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;
}
.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">
  <div id="vmGridHdr" class="vmGridDivHdr" style="width: 670px;">
    <table width="670">
	  <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>
  </div>
  <div id="vmGridBdy" class="vmGridDivBdy" style="width: 670px;">
    <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>
</div>
</body>
</html>
 
Upvote 0 Downvote
i added this css, which helped:

Code: 
#vmGrid * table {
    width: 670px;
    table-layout: fixed;
}

you might want to also either remove this from the second table, or add it to the first:

Code: 
cellspacing="0" cellpadding="2"

i try to use css in place of properties whenever i can. in my fix of your code, my two table tags simply looked like:

Code: 
<table>



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
ClFlava:

Thanks for the reply. I need to keep the table width out out the css structre becuase the code is part of a function that will be called by many tables, all with varying widths. I added the "table-layout: fixed" and it threw off the borders even more. Perpelexing.

Shawn
 
Upvote 0 Downvote
Elcid32 said:
I added the "table-layout: fixed" and it threw off the borders even more. Perpelexing.
Click to expand...

then you obviously did not try this:

cLFlaVA said:
you might want to also either remove this from the second table, or add it to the first:
Code: 
cellspacing="0" cellpadding="2"
Click to expand...



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
I did make sure that both tables contained the cellspacing and cellpadding - still didn't work. I think I may have found a fix:

Code: 
table {
    width: 0;
    table-layout: fixed;
}
Code: 
    <table cellspacing="0" cellpadding="2">
	  <tr >
	    <th style="width: 100px" class="vmGridCelHdr">Header 1</th>
	    <th style="width: 60px" class="vmGridCelHdr">Header 2</th>
	    <th style="width: 77px" class="vmGridCelHdr">Header 3</th>
	    <th style="width: 200px" class="vmGridCelHdr">Header 4</th>
	    <th style="width: 65px" class="vmGridCelHdr">Header 5</th>
	    <th style="width: 158px" class="vmGridCelHdrLast">Header 6</th>										
	  </tr>
	</table>
    <table cellspacing="0" cellpadding="2">
	  <tr >
	    <td style="width: 100px" class="vmGridCelBdy">data 1:1</td>
	    <td style="width: 60px" class="vmGridCelBdy">data 1:2</td>
	    <td style="width: 77px" class="vmGridCelBdy">data 1:3</td>
	    <td style="width: 200px" class="vmGridCelBdy">data 1:4</td>
	    <td style="width: 65px" class="vmGridCelBdy">data 1:5</td>
	    <td style="width: 158px" class="vmGridCelBdyLastCol">data 1:6</td>										
	  </tr>
	  <tr >
	    <td style="width: 100px" class="vmGridCelBdyLastRow">data 2:1</td>
	    <td style="width: 60px" class="vmGridCelBdyLastRow">data 2:2</td>
	    <td style="width: 77px" class="vmGridCelBdyLastRow">data 2:3</td>
	    <td style="width: 200px" class="vmGridCelBdyLastRow">data 2:4</td>
	    <td style="width: 65px" class="vmGridCelBdyLastRow">data 2:5</td>
	    <td style="width: 158px" class="vmGridCelBdyLastRowCol">data 2:6</td>	
	  </tr>	  
	</table>

Also, you mentioned something about everyone developing thier websites with javascript lately. What did you mean by that and what do you suggest?



 
Upvote 0 Downvote
I did make sure that both tables contained the cellspacing and cellpadding - still didn't work.
Click to expand...

then you left something out of your sample:
Also, you mentioned something about everyone developing thier websites with javascript lately. What did you mean by that and what do you suggest?
Click to expand...

generating with straight html, or server-side code. anyone without javascript enabled will see nothing on your page.



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
908
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
165
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
170
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
145
vacunita
vacunita
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
129
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top