This code is generated in PHP. It's a test to try to solve a problem in a report. I've got a table with 2 td tags. The first td tag contains a table with 21 rows, each having 1 td tag with css height = 38px. The second td tag contains 21 div tags. Each div style is: 'position:relative; top: ( 38 * row num) px; height:1px; width:200px; border:none; padding:0; margin:0; background:red;' The lines (div tags) don't line up with the tops of the td tags in the sub table in the left td tag. Why don't they line up? More importantly, how can I make them line up? What I really need is the exact vertical location of the middle of each label (td tag in the subtable in the left column). The div tags are just for the test. I need to create pie charts in JPGraph where the center lines up with the center of a specific row (just FYI). If I can make the div tags line up, I can make the charts line up. So far, I can't and I can't figure out why. It seems 38px is not 38px. The Test Page PHP $ar = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]; $html = "<table cellpadding='0' cellspacing='0'><tr><td style='vertical-align:top; border:none; margin:0; padding:0' ><table cellpadding='0' cellspacing='0'>"; for($i=0; $i < count($ar); $i++) { $html .= "<tr><td style='height:38px; width:35px; border:none;margin:0;padding:0; background:" . getColor($i) . ";' ></td></tr>"; } $html .= "</table></td><td style='vertical-align:top; border:none; margin:0; padding:0;' >"; for($i=0; $i < count($ar); $i++) { $html .= "<div style='position:relative; top:" . (38 * $i) . "px; height:1px; width:200px; border:none; margin:0; padding:0; background:red;' ></div>"; } $html .= "</td></tr></table>"; echo $html; function getColor($increment) { $arColors = ['#B71C1C','#0D47A1','#1B5E20','#E65100','#4A148C','#F57F17','#ff6f00','#263238','#006064','#827717','#880E4F','#004D40','#BF360C','#311B92','#1A237E','#01579B','#33691E','#C62828','#1565C0','#2E7D32','#EF6C00','#6A1B9A','#F9A825','#ff8f00','#37474F','#00838F','#9E9D24','#AD1457','#00695C','#D84315','#4527A0','#283593','#0277BD','#558B2F','#D32F2F','#1976D2','#388E3C','#F57C00','#7B1FA2','#FBC02D','#ffa000','#455A64','#0097A7','#AFB42B','#C2185B','#00796B','#E64A19','#512DA8','#303F9F','#0288D1','#689F38','#E53935','#1E88E5','#43A047','#FB8C00','#8E24AA','#FDD835','#ffb300','#546E7A','#00ACC1','#C0CA33','#D81B60','#00897B','#F4511E','#5E35B1','#3949AB','#039BE5','#7CB342','#F44336','#2196F3','#4CAF50','#FF9800','#9C27B0','#FFEB3B','#ffc107','#607D8B','#00BCD4','#CDDC39','#E91E63','#009688','#FF5722','#673AB7','#3F51B5','#03A9F4','#8BC34A','#EF5350','#42A5F5','#66BB6A','#FFA726','#AB47BC','#FFEE58','#ffca28','#78909C','#26C6DA','#D4E157','#EC407A','#26A69A','#FF7043','#7E57C2','#5C6BC0','#29B6F6','#9CCC65','#E57373','#64B5F6','#81C784','#FFB74D','#BA68C8','#FFF176','#ffd54f','#90A4AE','#4DD0E1','#DCE775','#F06292','#4DB6AC','#FF8A65','#9575CD','#7986CB','#4FC3F7','#AED581','#EF9A9A','#90CAF9','#A5D6A7','#FFCC80','#CE93D8','#FFF59D','#ffe082','#B0BEC5','#80DEEA','#E6EE9C','#F48FB1','#80CBC4','#FFAB91','#B39DDB','#9FA8DA','#81D4FA','#C5E1A5','#FFCDD2','#BBDEFB','#C8E6C9','#FFE0B2','#E1BEE7','#FFF9C4','#ffecb3','#CFD8DC','#B2EBF2','#F0F4C3','#F8BBD0','#B2DFDB','#FFCCBC','#D1C4E9','#C5CAE9','#B3E5FC','#DCEDC8','#FFEBEE','#E3F2FD','#E8F5E9','#FFF3E0','#F3E5F5','#FFFDE7','#fff8e1','#ECEFF1','#E0F7FA','#F9FBE7','#FCE4EC','#E0F2F1','#FBE9E7','#EDE7F6','#E8EAF6','#E1F5FE','#F1F8E9']; if(!is_numeric($increment) || $increment > count($arColors) - 1) $increment = 1; return $arColors[$increment]; } Code (markup):
I don't know the answer but perhaps you may want to try to: a. first position the 2nd td (with divs) as relative. b. reposition all divs within that 2nd div as absolute.
doesn't make sense to me...why don't you just create one table with two columns and multiple rows? Just load your pie charts in the right col. and whatever in the left and set the "valign" attributes for both to center. That way it doesn't matter which item in the row is larger each will adjust.
If you wanted them to line up, and they're "related", why two separate tables and not just an extra TD instead of the separate DIV? You probably also shouldn't be trying to dick around in pixels since that's a middle finger to usability and accessibility. Slopping style="" into the markup isn't helping much either. Your increment routine also doesn't make sense. NOT that you should be setting colours from the markup either... or lighting memory on fire building a giant string you could have just echo'd out in the first place. Also don't forget modulo is your friend, and everything is a thousand times simpler if you STOP slopping style into your markup and server side code unless it can be avoided... define('BGCOLORS', [ ' 'B71C1C','0D47A1','1B5E20','E65100','4A148C','F57F17','ff6f00','263238', '006064','827717','880E4F','004D40','BF360C','311B92','1A237E','01579B', '33691E','C62828','1565C0','2E7D32','EF6C00','6A1B9A','F9A825','ff8f00', '37474F','00838F','9E9D24','AD1457','00695C','D84315','4527A0','283593', '0277BD','558B2F','D32F2F','1976D2','388E3C','F57C00','7B1FA2','FBC02D', 'ffa000','455A64','0097A7','AFB42B','C2185B','00796B','E64A19','512DA8', '303F9F','0288D1','689F38','E53935','1E88E5','43A047','FB8C00','8E24AA', 'FDD835','ffb300','546E7A','00ACC1','C0CA33','D81B60','00897B','F4511E', '5E35B1','3949AB','039BE5','7CB342','F44336','2196F3','4CAF50','FF9800', '9C27B0','FFEB3B','ffc107','607D8B','00BCD4','CDDC39','E91E63','009688', 'FF5722','673AB7','3F51B5','03A9F4','8BC34A','EF5350','42A5F5','66BB6A', 'FFA726','AB47BC','FFEE58','ffca28','78909C','26C6DA','D4E157','EC407A', '26A69A','FF7043','7E57C2','5C6BC0','29B6F6','9CCC65','E57373','64B5F6', '81C784','FFB74D','BA68C8','FFF176','ffd54f','90A4AE','4DD0E1','DCE775', 'F06292','4DB6AC','FF8A65','9575CD','7986CB','4FC3F7','AED581','EF9A9A', '90CAF9','A5D6A7','FFCC80','CE93D8','FFF59D','ffe082','B0BEC5','80DEEA', 'E6EE9C','F48FB1','80CBC4','FFAB91','B39DDB','9FA8DA','81D4FA','C5E1A5', 'FFCDD2','BBDEFB','C8E6C9','FFE0B2','E1BEE7','FFF9C4','ffecb3','CFD8DC', 'B2EBF2','F0F4C3','F8BBD0','B2DFDB','FFCCBC','D1C4E9','C5CAE9','B3E5FC', 'DCEDC8','FFEBEE','E3F2FD','E8F5E9','FFF3E0','F3E5F5','FFFDE7','fff8e1', 'ECEFF1','E0F7FA','F9FBE7','FCE4EC','E0F2F1','FBE9E7','EDE7F6','E8EAF6', 'E1F5FE','F1F8E9' ] ); define('BGCOLOR_COUNT', count(BGCOLORS)); $data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]; echo ' <table class="describeTheData"> <tbody>'; foreach ($data as $index => $value) echo ' <tr> <td class="--bgColor:#', BGCOLORS[$index % BGCOLOR_COUNT], '"></td> <td></td> </tr>'; echo ' </tbody> </table>'; Code (markup): I store the colour in a custom property so that the stylesheet can choose to ignore it, such as in the case of monochrome print or UA's that flat out don't care. EVERYTHING else goes in your external stylesheet. .describeTheData { border:0; border-collapse:collapse; table-layout:fixed; } .descibeTheData td:first-child { width:2.1875rem; height:2.3755rem; background:var(--bgColor); } .describeTheData td:last-child { vertical-align:top; width:12.5rem; } .describeTheData td:last-child:before { content:""; display:block; height:0.0625rem; background:#FFF; } Code (markup): Cleaner easier to maintain markup and PHP, faster loading, and better leveraging of cache. Even in testing, crapping everything into your PHP (and markup) is a bad idea. NOT that any of this looks like actual tabular data since you have no headings and so forth... but since you have no content... well... honestly not sure what you're doing much less what the correct markup would be.
deathshadow: thanks for the response. First you've gotta realize that this code has to create html that both mPDF and PHPWord (my version) can translate. That means no side by side block elements except td tags. There are other restrictions as well. The top table's left td holds a table of rows in a vertical gauge. The colors here are just so we can see the rows in the TEST. "dick around in pixels" this is for printed reports having specific page dimensions. "STOP slopping style": most of the styles here are for the TEST just to make it easier for you to see. "increment routine also doesn't make sense" why? Do you think manually writing all 21 rows in a string is more efficient? "class="--bgColor:#', BGCOLORS[$index % BGCOLOR_COUNT], '": that's pretty interesting. No monochrome here. It' a gauge that uses color - also again, it's for PRINT. I'll consider something like this but the real colors make up the gauge and they are called from a number of places in the app (it's a function). Maybe I can write a constant of the entire html. I can't remember if I always display it the same. Your css doesn't work for mPDF or PHPWord. I don't usually like this: ".descibeTheData td". The td's are usually different depending on content column. I use it occasionally. Again, this is a TEST. The code is written exclusively to find the problem which was that the lines (divs) on the right didn't line up with the row tops in the left. That was because I forgot about relative -> absolute. That's fixed now. "Even in testing, crapping" irrelevant to me here. I don't care if it takes longer or eats up memory. It's temporary and not formal testing. I wanted people reading this to be able to see everything (ie styles) real easy. "actual tabular data": the table issue again? Yea that's because mPDF doesn't recognize inline-block or any semblance thereof. I use tables for whatever I need them for. I'll try to keep accessibility in mind though (not for this printable report). I actually tried to comply a bit more with your restriction on this. I prefer using grid - but - neither mPDF nor PHPWord have any idea what that is. So the left td holds a table of rows that make up a gauge. The right td holds an image which is made up of pie charts. The center of each pie chart must line up with the center of the row in the gauge that it's calculated average matches. Centering the pie charts was the actual problem I was trying to solve. So I like this: "class="--bgColor:#', BGCOLORS[$index % BGCOLOR_COUNT], '" The rest - eh. Thanks again for your response.