Question

我在表格布局中有一个<div>的嵌套组，包含可变数量的行和6列。

<div id="table"></div>

var table = document.getElementById("table");
for (var i = 0; i < entities.length; ++i) {
  var row = document.createElement("DIV");
  row.className = "row";
  table.appendChild(row);

  // column 1
  var cell = document.createElement("DIV");
  cell.className = "cell";
  row.appendChild(cell);
  var img = document.createElement("IMG");
  img.src = img1;
  cell.appendChild(img);

  // column 2
  cell = document.createElement("DIV");
  cell.className = "cell";
  row.appendChild(cell);
  img = document.createElement("IMG");
  img.src = img2;
  cell.appendChild(img);

  // column 3
  cell = document.createElement("DIV");
  cell.className = "cell textCell";
  cell.textContent = entities[i].text;
  row.appendChild(cell);

  // column 4
  cell = document.createElement("DIV");
  cell.className = "cell";
  row.appendChild(cell);
  if (entities[i].condition1) {
    img = document.createElement("IMG");
    img.src = img3;
    cell.appendChild(img);
  }

  // column 5
  cell = document.createElement("DIV");
  cell.className = "cell";
  row.appendChild(cell);
  if (entities[i].condition2) {
    img = document.createElement("IMG");
    img.src = img4;
    cell.appendChild(img);
  }

  // column 6
  cell = document.createElement("DIV");
  cell.className = "cell";
  row.appendChild(cell);
  if (entities[i].condition3) {
    img = document.createElement("IMG");
    img.src = img5;
    cell.appendChild(img);
  }

#table { display: table; width: 100%; }
.row { display: table-row; }
.cell { display: table-cell; }
.textCell { width: 100%; }

上面的脚本片段会生成表格。图像单元格围绕其图像进行自动调整，文本单元格填满了表格的其余部分。通常，每列中的细胞彼此对齐。但是，某些行可能在第4-6列中有一个或多个空单元格 - 没有一致的模式，并且取决于从服务器检索的数据。如果在第4列或第5列的单元格中创建图像，并且后面的列的单元格为空，则空单元格会折叠，而其他单元格在此之前会变得不对齐。

我想要的是，无论情况如何，每列中的单元格都保持对齐。我怎样才能做到这一点？

保持列在包含空单元格的div表中对齐

0 个答案: