删除表格中按钮单元格之间的空间

Question

我必须在每个单元格内创建一个带有按钮的表格。但是，我无法删除单元格之间的空白。有什么想法吗？抱歉介绍不佳。如果需要任何信息，请发表评论？

    var table = document.createElement('table');
    table.className="table";
	for (var i = 1; i < 5; i++){
	    var tr = document.createElement('tr');
		for (var j = 1; j < 5; j++){
		    var td = document.createElement('td');
		    var but = document.createElement("BUTTON");
		    but.className = "table_but";
		    td.appendChild(but);
		    tr.appendChild(td);
			}
	    table.appendChild(tr);
	}
	document.getElementById("table").appendChild(table);

table {
    border-collapse: collapse;
	border-spacing: 0;
}
tr{
	padding: 0px;
    margin: 0px;
}
td {
	height: 20px;
	width: 20px;
	padding: 0;
    margin: 0;
}
.table_but{
	height: 100%;
	width: 100%;
    margin : 0;
    padding : 0;
}

<div id="table">
</div>

Answer 1

如果我理解正确，你应该在你的 css 中使用：

// cellpadding
th, td { padding: 0px; }

// cellspacing
table { border-collapse: collapse; border-spacing: 0; }   // cellspacing="0"

// valign
th, td { vertical-align: top; }

// align (center)
table { margin: 0 auto; }

字体：In HTML5, with respect to tables, what replaces cellpadding, cellspacing, valign, and align?

Answer 2

按钮的边框有问题。首先，您应该将按钮设置为display: block。

一个简单的解决方案是将按钮的高度显式设置为单元格的高度 (20px)。看到这个sn-p：

var table = document.createElement('table');
    table.className="table";
	for (var i = 1; i < 5; i++){
	    var tr = document.createElement('tr');
		for (var j = 1; j < 5; j++){
		    var td = document.createElement('td');
		    var but = document.createElement("BUTTON");
		    but.className = "table_but";
		    td.appendChild(but);
		    tr.appendChild(td);
			}
	    table.appendChild(tr);
	}
	document.getElementById("table").appendChild(table);

table {
    border-collapse: collapse;
	border-spacing: 0;
}
tr{
	padding: 0px;
    margin: 0px;
}
td {
	height: 20px;
	width: 20px;
	padding: 0;
    margin: 0;
}
.table_but{
	height: 20px;
	width: 100%;
    margin : 0;
    padding : 0;
    display: block;
}

<div id="table">
</div>

如果您不需要按钮的边框，移除它们也可以解决问题（我添加了悬停颜色以帮助区分按钮）：

var table = document.createElement('table');
    table.className="table";
	for (var i = 1; i < 5; i++){
	    var tr = document.createElement('tr');
		for (var j = 1; j < 5; j++){
		    var td = document.createElement('td');
		    var but = document.createElement("BUTTON");
		    but.className = "table_but";
		    td.appendChild(but);
		    tr.appendChild(td);
			}
	    table.appendChild(tr);
	}
	document.getElementById("table").appendChild(table);

table {
    border-collapse: collapse;
	border-spacing: 0;
}
tr{
	padding: 0px;
    margin: 0px;
}
td {
	height: 20px;
	width: 20px;
	padding: 0;
    margin: 0;
}
.table_but{
	height: 100%;
	width: 100%;
    margin : 0;
    padding : 0;
    display: block;
    border: none;
}

.table_but:hover {
    background-color: yellow;
}

<div id="table">
</div>

Answer 3

如果我理解了，您只需将“行高”设置为 0，即可查看结果。

    var table = document.createElement('table');
    table.className="table";
	for (var i = 1; i < 5; i++){
	    var tr = document.createElement('tr');
		for (var j = 1; j < 5; j++){
		    var td = document.createElement('td');
		    var but = document.createElement("BUTTON");
		    but.className = "table_but";
		    td.appendChild(but);
		    tr.appendChild(td);
			}
	    table.appendChild(tr);
	}
	document.getElementById("table").appendChild(table);

table {
    border-collapse: collapse;
	border-spacing: 0;
}
tr{
	padding: 0px;
    margin: 0px;
}
td {
	height: 20px;
	width: 20px;
	padding: 0;
    margin: 0;
    line-height: 0;
}
.table_but{
	height: 100%;
	width: 100%;
    margin : 0;
    padding : 0;
}

<div id="table">
</div>