Question

如何避免每次运行程序时更改单元格大小的数字？我希望在数字之间具有相等的间距，而不会从左到右移动单元格。

var arr = new Array(5);

var i = 0, j, n;

var OK = true;

var printThis = " "; 

var table = "<table style = font-size:25px; >"; 

while (i < arr.length) {

      n = Math.floor((Math.random() * 35) + 1);

      for (j = 0; j < i; j++) {

          if (arr[j] == n) {
            OK = false;
          }
      }

      if (OK) {
          arr[i] = n;

          table += "<td>" + arr[i] + "</td>"; 

          i++;
      }
      OK = true;

}

table += "</table>";

document.getElementById("demo").innerHTML = table;

Answer 1

将静态宽度设为td

var arr = new Array(5);

var i = 0,
  j, n;

var OK = true;

var printThis = " ";

var table = "<table style = 'font-size:25px;'>";

while (i < arr.length) {

  n = Math.floor((Math.random() * 35) + 1);

  for (j = 0; j < i; j++) {

    if (arr[j] == n) {
      OK = false;
    }
  }

  if (OK) {
    arr[i] = n;

    table += "<td width='25px'>" + arr[i] + "</td>";

    i++;
  }
  OK = true;

}

table += "</table>";

document.getElementById("demo").innerHTML = table;

<div style='border:1px solid black;display:inline-block' id='demo'></div>

Answer 2

这是一个使用div而不是table的解决方案，以防某些人有一天需要这个。在具有固定宽度的div内均匀显示五个数字（一个或两个数字）。

CSS

.container
{
    display:flex;
    justify-content:space-between;
    width: 125px;
    font-size:25px;
    border: 1px solid #000;
}
.item
{
    display:inline;
}

javascript：

var arr = new Array(5);
var i = 0, j, n;
var OK = true;
var printThis = " "; 
var table = "<div class='container'>"; 
while (i < arr.length) {
    n = Math.floor((Math.random() * 35) + 1);
    for (j = 0; j < i; j++) {
        if (arr[j] == n) {
            OK = false;
        }
    }
     if (OK) {
        arr[i] = n;
        table += "<div class='item'>" + arr[i] + "</div>"; 
        i++;
    }
    OK = true;
}
table += "</div>";
document.getElementById("demo").innerHTML = table;

HTML：

<div style='border:1px solid black;display:inline-block' id='demo'></div>

每次运行程序时如何避免数字更改单元格大小？

2 个答案: