HTML表格以平方單元格擬合屏幕高度

Question

  var grid = document.getElementById("grid"); var size = 50; for (var y = 0; y < size; y++) { var currentRow = grid.insertRow(0); for (var x = 0; x < size; x++) { var currentCell = currentRow.insertCell(-1); currentCell.style.height = currentCell.style.width = `calc(100vh / ${size})`; currentCell.style.backgroundColor = (x+y)%2 == 0 ? "Blue" : "Red"; } }

 body { margin: 0; } table#grid { border-collapse: collapse; height: 100%; }

 <html> <body> <table id="grid" align="center"></table> </body> </html>

我需要的是一個適合屏幕高度並具有正方形單元格的桌子。 我幾乎嘗試了所有操作 ，使用隱藏圖像獲得了最好的結果。 單元幾乎是平方的，盡管不足以滿足我的需求。 當然，我不想使用任何絕對間距。 實際上，我也想只使用簡單的CSS / JavaScript而無需圖像。 該表的大小將在運行時知道，但讓我們假設它的大小為2：

<table>
    <tr>
        <td><img src='placeholder.png'></td>
        <td><img src='placeholder.png'></td>
    </tr>
    <tr>
        <td><img src='placeholder.png'></td>
        <td><img src='placeholder.png'></td>
    </tr>
</table>

在CSS中

table {
    height: 100%;
}

img {
    height: 100%;
    width: auto;
    visibility: hidden
}

非常感謝任何想法（不太復雜的想法）。

Answer 1

您可以使用CSS calc計算高度和寬度，我不知道它是否正是您想要的，但是您可以在這里嘗試：

 .blue { background-color: blue; } .red { background-color: red; } body { margin: 0; } td { height: calc(100vh / 2); width: calc(100vh / 2); } table { border-collapse: collapse; }

 <table> <tr> <td class="blue"></td> <td class="red"></td> </tr> <tr> <td class="red"></td> <td class="blue"></td> </tr> </table>

如果需要更改網格大小並計算每個單元格的新高度和寬度，還可以添加一些JavaScript代碼。

HTML表格以平方單元格擬合屏幕高度

問題描述

1 個解決方案

解決方案1
0 已采納 2019-03-10 21:17:49

HTML表格以平方單元格擬合屏幕高度

問題描述

1 個解決方案

解決方案1 0 已采納 2019-03-10 21:17:49

解決方案1
0 已采納 2019-03-10 21:17:49