HTML chess-board table with empty cell must adjust with multiple resolution

Question

I am trying to make chess board type table with 15X15 row and columns. My problem is I need to make this table flexible with all the resolutions of mobile phones. The column of each table should not get abnormal stretch but should be stretch with respect to device resolution. I am very much new in CSS and I want to know if there is any way I can adjust the chess board table with 100% scale on width and height. Here is the normal chess board that I am creating on the resolution of 480X854 and 320X480.

One more thing when I use table width and height in pixel then things works for any specific resolution fine but using percentage on table tr does not give result but shrink everything abnormally. I like to see what would be the best solution you guys will use in this situation or if mobile jQuery has anything related to it. Please let me know if I should explain more

Here is the jsfiddle for preview:

jsfiddle.net/97Nz5

Answer 1

You tagged your question with jQuery so I assume you're using it. I don't think there is way to do it in pure css.

$(function(){

   var $gameboard = $('#gameboard-terrain');
    var $cells = $gameboard.find('td');

    var adjustHeight = function(){
        var width = $cells.width();
        $cells.height(width);
    };

    $(window).resize(function(){
       adjustHeight(); 
    });
    adjustHeight();

});

Demo here http://jsfiddle.net/97Nz5/3/

Edit
You're right my function only adjust cells height to be equal with width. What you should use to output different cells size on different resoultions are css media queries. For example like this:

@media (max-width: 479px) {
    table {
        width: 480px;
    }
}

Demo http://jsfiddle.net/97Nz5/8/