我試圖在React中創建一個數獨謎題的表示。我使用帶有表格、表格行和表格單元格顯示模式的div，并在其中添加了一個只讀輸入框來實現這一點。然而，我的table to看起來并不像預期的那樣，因為它在輸入框上方有奇怪的間隙。如果我讓輸入框& gt= 30x30不過看起來還不錯。

interface HistCellProps {
  value: number;
}

function HistCell({value}: HistCellProps ) {
  return (
    //<div className='test'></div>
    <input value={value} className='histCellInput' readOnly />
  );
}

interface HistGridProps {
  grid: number[][];
}

function HistGrid({grid}: HistGridProps) {
  return (
    <div className='histGrid'>
      {grid.map((row: number[], rowIndex: number) =>
        <div key={rowIndex} className={(rowIndex + 1) % 3 == 0 ? 'bHistRowBorder' : 'nHistRowBorder'}>
          {row.map((value: number, colIndex: number) =>
            <div key={colIndex} className={(colIndex + 1) % 3 == 0 ? 'rHistBorder' : 'nHistBorder'}>
              <HistCell value={value} />
            </div>
          )}
        </div>
      )}
    </div>
  );
}

.histGrid {
  display: table;
  border: solid 2px black;
  border-collapse: collapse;
}

.nHistRowBorder {
  display: table-row;
  border: solid 1px black;
}

.bHistRowBorder {
  display: table-row;
  border: solid 1px black;
  border-bottom: solid 2px black;
}

.nHistBorder {
  display: table-cell;
  border: solid 2px black;
}

.rHistBorder {
  display: table-cell;
  border: solid 1px black;
  border-right: solid 2px black;
}

.histCellInput {
  width: 15px;
  height: 15px;
  text-align: center;
  font-size: 7.5px;
  color: black;
  background-color: azure;
  border: 0px solid black;
}