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:
var columnwidth1 = $('td:first-child').width(), columnwidth2 = $('td:last-child').width(), offset = (columnwidth1 - columnwidth2) / 2; $('table').css('right', offset + 'px');
Comments
Post a Comment