javascript - Fitting element into table cell -
i trying fit canvas element table cell no padding @ all, i.e. want no margins between canvas , top/bottom of cell. therefore, define row height 20px , canvas height 20px. use padding:0px styling. however, no padding top , left , still padding @ bottom. in fact, looks table cell gets taller in order accommodate undesired margin. how can resolve it?
also, difference between defining canvas width , height in html , css? 1 override other?
below html code. thanks.
<!doctype html> <html lang="en"> <html> <head> <meta charset="utf-8"> <title>experiment</title> <body> <script> $(function() { var canvas = document.getelementbyid('my_canvas'); var ctx = canvas.getcontext('2d'); ctx.fillrect(0,0,20,20); $("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas")); }) </script> </head> <style media="screen" type="text/css"> .my_cell {height:20px; width:100px; padding:0} .my_canvas {height:20px; width:20px} </style> <table id="my_table" border="1" cellspacing="0" cellpinserting="0"> <tbody> <tr><td class="my_cell"></td></tr> </tbody> </table> <canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas> </body> </html>
try adding following canvas's style:
display : block; demo: http://jsfiddle.net/s7yju/
you can see why if @ this: http://jsfiddle.net/s7yju/1/ - default canvas displays inline means lines in way leaves space bottom of letters "y" or "p" hang beneath...
Comments
Post a Comment