[英]remove empty spaces around cells in HTML table
I am trying to crrate a chessboard using HTML and JS.我正在尝试使用 HTML 和 JS 来制作棋盘。 I'm using HTML tables for that purpose.
为此,我正在使用 HTML 表。 but I'm not sure why but there is are empty spaces around each cells.
但我不知道为什么,但每个单元格周围都有空格。
I've tried cell-spacing:0;
我试过
cell-spacing:0;
but it doesn't seems to work.\但它似乎不起作用。\
see the red background around cells.查看单元格周围的红色背景。 Here is the code
这是代码
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; }
I'm prefering javascript or css solutions to this.我更喜欢 javascript 或 css 解决方案。 Thanks.
谢谢。
Set table.cellSpacing = 0;
设置
table.cellSpacing = 0;
before adding the table to the document:在将表格添加到文档之前:
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; }
Just add border-collapse: collapse
to your table CSS:只需添加
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.