如何固定表格大小并仅根据单元格的数量调整单元格的大小？

Question

我创建了一个 div 表，当您将鼠标悬停在它们上方时会变为红色。

var createGrid = function(width, height){

for (var i = 16; i <= height+15; i++)
{
    $('<tr></tr>', {
        'id'   : 'tr' + i
    }).appendTo($('#one'));

    for (var j = 16; j <= width+15; j++) {
        $('<td></td>', {
            'id' : 'td' + i + j
        }).appendTo($('#tr' + i));

        $('#td' + i + j).wrapInner('<div class="div" />');
    };

$('div').css({
    'border' : '1px solid black',
    'height' : '20px',
    'width'  : '20px'
    });

};  };

而且我还有一种方法可以询问用户单击按钮时表格的宽度/高度。

$(this).on('click', '#reset', function() {
$('tbody').remove();


var w = +prompt("width?");
var h = +prompt("height?");
createGrid(w, h);  });

但是，当单元格越多时，表格就会变大。如何使表格大小固定，但在单元格较少时使单元格较大，在单元格较多时使单元格变小？

Answer 1

使用css设置

table{
 width:"500" 
}

您已经定义了单元格的宽度

 $('div').css({
        'border' : '1px solid black',
        'height' : '20px',
        'width'  : '20px'
        });

尽量用10%或其他百分比代替数字