html - Center a 2 column table through middle border -


i have table 2 columns of different widths. how center table on page middle vertical border?

<table>     <tr>         <td>col 1 test</td>         <td>col 2</td>     </tr>     <tr>         <td>col 1 test</td>         <td>col 2</td>     </tr>     <tr>         <td>col 1 test</td>         <td>col 2</td>     </tr> </table> 

for example:

                    |  center of page                     \/  ------------------------------------------ |                                          | |   table                               | |    -------------------------             | |   | col 1 test     | col 2  |            | |   |----------------|--------|            | |   | col 1 test     | col 2  |            | |   |----------------|--------|            | |   | col 1 test     | col 2  |            | |    -------------------------             | |                                          |  ------------------------------------------ 

this wonky code, technically works. wouldn't suggest using is:

http://jsfiddle.net/pq2x4t4f/

var columnwidth1 = $('td:first-child').width(),     columnwidth2 = $('td:last-child').width(),     offset = (columnwidth1 - columnwidth2) / 2;  $('table').css('right', offset + 'px'); 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -