alienA2 Posted December 6, 2011 Share Posted December 6, 2011 How do I keep a table centred when the web page is zoomed out. Browser Mozilla Firefox. Currently I have the following code in CSS to keep my table in order. table.table_1{width:1000;height:50;border:0px;border-collapse:collapse; /* 'cellspacing' equivalent */padding:0; /*'cellpadding' equivalent */border-bottom:thick groove #bfbfbf;margin-left: auto;margin-right: auto;margin-top: auto;margin-bottom: auto;} The only problem is when I zoom out in Firefox, it keeps the table aligned on top and not centred... Link to comment Share on other sites More sharing options...
dsonesuk Posted December 6, 2011 Share Posted December 6, 2011 'Centred' refers to horizontal centring, vertical alignment is what you are referring to. border-collapse:collapse; converts the default thick rounded border to a 1px border; border-spacing: 0; /*other browsers*/ border-spacing: expression(cellSpacing=0); /*for IE*/ is cellspacing equivalent Link to comment Share on other sites More sharing options...
alienA2 Posted December 6, 2011 Author Share Posted December 6, 2011 vertical-align I tried middle and text-top and nothing worked...please advice Link to comment Share on other sites More sharing options...
TheGallery Posted December 7, 2011 Share Posted December 7, 2011 Vertical-align is a bit more complicated than horizontal aligning. Here is a guide that i've used before. It contains various ways you can do it. http://blog.themeforest.net/tutorials/vertical-centering-with-css/ Link to comment Share on other sites More sharing options...
dsonesuk Posted December 7, 2011 Share Posted December 7, 2011 Vertical align does not work on the table element, it works only for cells, so you would have to nest this table into another table with cell using vertical align, this however won't work on its own as the parent element (body) is the same height as the content within it i.e. these tables, it will vertical align to the available space which will be 0. So you will have set the height of body and html to 100%. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">html, body {height:100%; margin:0; padding:0;}table {border-spacing:0; border-spacing: expression(cellSpacing=0); /*for IE*/ border-collapse:collapse; margin:0 auto;border:0px;padding:0px; /*'cellpadding' equivalent */}table.wrapper {height:100%;}table.wrapper td {vertical-align:middle;}table.table_1{width:1000px;height:50px;border-bottom:thick groove #bfbfbf;}</style></head><body><table class="wrapper"> <tr> <td><table class="table_1"> <tr> <td> 1</td> <td> 2</td> <td> 3</td> <td> 4</td> <td> 5</td> </tr> <tr> <td> 6</td> <td> 7</td> <td> 8</td> <td> 9</td> <td> 10</td> </tr></table></td> </tr></table></body></html> Link to comment Share on other sites More sharing options...
TheGallery Posted December 8, 2011 Share Posted December 8, 2011 Thanks for the input dsonesuk. I wasn't aware of that. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.