javascript - 将二维数组打印到 HTML 表格

Question

我正在用 TypeScript 构建一个二维数组。这是我在 TypeScript 中的代码。

this.boxArray = new Array<Array<Box>>();
const ROW_MAX: number = 10;
const COL_MAX: number = 10;

for (let i: number = 0; i < ROW_MAX; i++) {
  const row: Box[] = new Array<Box>();
  for (let j: number = 0; j < COL_MAX; j++) {
    row.push(new Box("A"));
  }
  this.boxArray.push(row);
}

我想用 HTML 将其打印为 10 x 10 的表格。当我使用 <table> 时它有效和 <td> , 但如果我想使用 <div> , 它不起作用。它只打印 100 个盒子，而不是 10 x 10。

<div class="CrosswordGridComponent" *ngFor="let row of boxArray; let i = index">
<div *ngFor="let col of boxArray; let j = index">
  <input id="{{i}}_{{j}}" type="text" maxLength="1" class="box"  
  [ngClass]="{ 
    'black': boxArray[i][j].isBlack()
  }" >
</div>

Answer 1

那是因为 div元素是 "block-level" element 和 block 级元素在新行上呈现，并且是其父元素宽度的 100%。

如果你想使用div元素，但有 table样式输出，您需要确保 div代表行的元素的样式为 table-row还有你的div代表您的单元格的元素的样式为 table-cell那div包含所有内容的样式为:table .

这是一个例子:

.table { display:table; }
.row   { display:table-row; }
.cell  { display:table-cell; border:1px solid black; padding:3px; }

<div class="table">
  <div class="row">
    <div class="cell">Cell 1, Row 1</div>
    <div class="cell">Cell 2, Row 1</div>
    <div class="cell">Cell 3, Row 1</div>    
  </div>
  <div class="row">
    <div class="cell">Cell 1, Row 2</div>
    <div class="cell">Cell 2, Row 2</div>
    <div class="cell">Cell 3, Row 2</div>    
  </div>  
  <div class="row">
    <div class="cell">Cell 1, Row 3</div>
    <div class="cell">Cell 2, Row 3</div>
    <div class="cell">Cell 3, Row 3</div>    
  </div>  
</div>