刪除 HTML 表中單元格周圍的空格
[英]remove empty spaces around cells in HTML table
問題描述
我正在嘗試使用 HTML 和 JS 來制作棋盤。 為此，我正在使用 HTML 表。 但我不知道為什么，但每個單元格周圍都有空格。
我試過cell-spacing:0; 但它似乎不起作用。\
查看單元格周圍的紅色背景。 這是代碼
var table = document.createElement("table"); table.id = "board"; table.classList.add = "div2"; for (var i = 1; i < 9; i++) { var tr = document.createElement('tr'); for (var j = 1; j < 9; j++) { var td = document.createElement('td'); if (i % 2 == j % 2) { td.className = "white"; } else { td.className = "black"; } tr.appendChild(td); td.innerHTML += td.cellIndex + 1; } table.appendChild(tr); } document.body.appendChild(table);
* { margin: 0; padding: 0; } body { background: red; display: flex; width: 100vw; height: 100vh; align-items: center; justify-content: center; overflow: scroll; }.black { background: #769656; }.white { background: #eeeed2; } table { border: 2px solid red; width: 95vw; cell-spacing: 0; cell-padding: 0; height: 95vw; }.div2 { width: 95vw; height: 95vw; }
我更喜歡 javascript 或 css 解決方案。 謝謝。
2 個解決方案
解決方案1
1 已采納 2021-04-11 04:58:09
設置table.cellSpacing = 0; 在將表格添加到文檔之前：
var table = document.createElement("table"); table.id = "board"; table.cellSpacing = 0; table.classList.add = "div2"; for (var i = 1; i < 9; i++) { var tr = document.createElement('tr'); for (var j = 1; j < 9; j++) { var td = document.createElement('td'); if (i % 2 == j % 2) { td.className = "white"; } else { td.className = "black"; } tr.appendChild(td); td.innerHTML += td.cellIndex + 1; } table.appendChild(tr); } document.body.appendChild(table);
* { margin: 0; padding: 0; } body { background: red; display: flex; width: 100vw; height: 100vh; align-items: center; justify-content: center; overflow: scroll; }.black { background: #769656; }.white { background: #eeeed2; } table { border: 2px solid red; width: 95vw; cell-spacing: 0; cell-padding: 0; height: 95vw; }.div2 { width: 95vw; height: 95vw; }
解決方案2
1 2021-04-11 05:03:24
只需添加border-collapse: collapse到你的表CSS：
var table = document.createElement("table"); table.id = "board"; table.classList.add = "div2"; for (var i = 1; i < 9; i++) { var tr = document.createElement('tr'); for (var j = 1; j < 9; j++) { var td = document.createElement('td'); if (i % 2 == j % 2) { td.className = "white"; } else { td.className = "black"; } tr.appendChild(td); td.innerHTML += td.cellIndex + 1; } table.appendChild(tr); } document.body.appendChild(table);
* { margin: 0; padding: 0; } body { background: red; display: flex; width: 100vw; height: 100vh; align-items: center; justify-content: center; overflow: scroll; }.black { background: #769656; }.white { background: #eeeed2; } table { border: 2px solid red; border-collapse: collapse; width: 95vw; height: 95vw; } td { text-align: center; }.div2 { width: 95vw; height: 95vw; }
<!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> </body> </html>
檢查 HTML 表中的單元格是否為空的最佳做法是什么？
[英]What is the best practice to check if the cells in an HTML table are empty?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.