删除 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.