Differing sizes of cells in table causing misalignment of columns

[wongadob]

Hi, I have a really strange occurance happening that I just cannot figure out. I have a table (or 2 tables I guess) I is a header that contains all the column headings and below the rest of the table. This table has lower Z value so it scrolls under the headers. The issue I have is that the cells in the headers are slightly larger that the cells in the bottom part. Each column is set to the right values in terms of width so I am sure the issue does not sit there. All cells have zero margins and padding. All cells have a left and bottom border of 1 pixel. That pixel is black for the header and white for the rest. I have checked all of these out in the 'inspect element' part of chrome and they are all as they should be. yet I look at the width in computed style window and they are differing sizes by 1 pixel (or more for bigger cells) both the header and the main cell for the first column have the following values (in debugger window)width set at 110 from CSSBorder-left is 1 pixel (white solid)margins left and right both 0padding left and right both 0borders are collapsed (not sure if this makes a difference) Yes the headers computed width is 117 and the body's is 116 How it gets to 116 in the first place is bizarre. should be 110 + 1 as far as I can see What else could be affecting this. I would send the code but its HUGE and PHP. Here is the CSS

#tableheaders {position: fixed;top: 124px;min-width: 1024px;z-index: 30;background-color: #FFFFFF;overflow-x: hidden;} .tmainviewtable {background-image: url("art/maindataview-title.png");background-repeat: repeat-x;font-family: "Arial","Arial","Helvetica","Sans-serif";font-size: medium;    color: #FFFFFF;    height: 50px;width: 2500px;min-width: 1024px;max-width: 2500px;    border: 1px black solid;    border-collapse:collapse;    padding: none;margin: 0;  }.tloc {    width: 110px;    border-left: 1px black solid;  }.tsite{    width: 110px;    border-left: 1px black solid;  }.tbusunit {    width: 180px;    border-left: 1px black solid;}.titem {    width: 200px;    border-left: 1px black solid;  }.taction {    width: 200px;    border-left: 1px black solid;  }.tspecial {    border-left: 1px black solid;    width: 130px;  }.tFM {    width: 50px;    border-left: 1px black solid;  }.tcompliant {    width: 90px;    border-left: 1px black solid;  }.tdatecomp {    width: 120px;    border-left: 1px black solid;  }.tdatereview {    width: 120px;    border-left: 1px black solid;  }.tfreq {    width: 100px;    border-left: 1px black solid;  }.tremedial {    width: 100px;    border-left: 1px black solid;  }.tcnw {    width: 120px;    border-left: 1px black solid;  }.tcomments {    width: 160px;    border-left: 1px black solid;  }.tinforce {    width: 180px;    border-left: 1px black solid;  }.tlastchange {    width: 180px;    border-left: 1px black solid;  }.tnotes {    width: 180px;    border-left: 1px black solid;  } #bottomhalf {position: relative;top: 173px;z-index: 0;margin: 0;}#dmainviewtable {   background-color: #e4e4e4;font-family: "Arial","Arial","Helvetica","Sans-serif";    font-size: small;width: 2500px;min-width: 1024px;max-width: 2500px;   color: #000000;    height: auto;    text-align: center;    border: 1px white solid;    border-collapse:collapse;    padding: none;  }	   .dsitetitle {   color: #FFFFFF;   background-color: #888888;   width: 100%;   height: 2em;   text-align: left;   font-size: medium;   font-weight: bold;	    border: 1px white solid;    padding-left: 10px;  }.dloc {    width: 110px;   min-height: 2em;    border-left: 1px white solid;    border-bottom: 1px white dotted;  }.dsite {    width: 110px;  border-left: 1px white solid;    border-bottom: 1px white dotted;	     }.dbusunit {    width: 180px;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.ditem {    width: 200px;    text-align: left;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.daction {    width: 200px;    text-align: left;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.dspecial {    width: 130px;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.dFM {    width: 50px;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.dcompliant {    width: 90px;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.ddatecomp {    width: 120px;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.ddatereview {    width: 120px;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.dfreq {    width: 100px;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.dremedial {    width: 100px;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.dcnw {    width: 120px;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.dcomments {    width: 160px;    text-align: left;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.dinforce {    width: 180px;    text-align: left;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.dlastchange {width: 180px;    text-align: left;    border-left: 1px white solid;    border-bottom: 1px white dotted;	   }.dnotes {    width: 180px;    text-align: left;    border-left: 1px white solid;    border-right: 1px white solid;    border-bottom: 1px white dotted;	   } .datarow:hover {background-color: #f6f6f6;    }

Any help much appreciated.

[Ingolme]

Can we see the HTML of the table? If one table is acting as the header for the other then you should only need one table.You can use the <thead> element to contain and style table header data separately from the rest of the data.