Question

我必须生成一个动态表，用户将在其中指定行数和列数以及它们与边距之间的间距。界面还有一个预览窗格。预览将向用户显示当前设置的选项，指示行cols间距边距。

我设计了一个动态表，但我无法将表的大小维持为固定。由于预览窗格已修复。

如何维护固定大小的预览窗格，用户可以在生成表格之前查看即将发生的更改

当用户选择行为4并且cols为2且margin为0且间距为10时，它应该按比例显示指定大小

我试过

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
table{width:300px;height:10px;}


td{
  width:100px;
  height:10px;
  overflow:hidden;
  word-wrap:break-word; 
  background-color: #f0f0f0
}
</style>
</head>

<body>

<script>
var rows = 4;
var cols = 5;
var table = $('<table border=1 cellspacing="10" cellpadding="10"><tbody>');
for(var r = 0; r < rows; r++)
{
    var tr = $('<tr>');
    for (var c = 0; c < cols; c++)
        $('<td>&emsp;</td>').appendTo(tr);
    tr.appendTo(table);
}
table.appendTo('body'); 

</script>
</body>
</html>

＆＃13;

Answer 1

只需删除您width的{{1}}媒体资源即可。 td元素具有固定宽度，因此如果您没有指定table的宽度，它将在所有单元格之间平均分配。

Answer 2

您可以通过编程方式而不是样式设置宽度和高度。这将允许您根据用户的输入计算所需的宽度和高度。

var table = $(`<table border=1 cellspacing="10" cellpadding="10" style='width: ${width}px; height: ${height}px;'><tbody>`);

您也可以不设置.table的宽度和高度，它只是内容的大小......

Answer 3

您可以通过Bootstrap非常简单地完成此操作。它将处理所有事情。

您可以在页面中添加引导程序样式。

您可以将课程添加为

<table class="table">

并且您可以以％为单位指定高度和宽度，以便根据您的需要进行响应。

<table class="table" style="width:90%; height:90%">

即使您添加任意数量的行和列，表格也会根据您的视图保持相同的响应。

添加行和列，而不调整表宽度和高度

3 个答案: