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％或其他百分比来替换数字

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

1 个答案: