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

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

一个简单的解决方案是将按钮的高度明确设置为单元格的高度（20px）。请参阅以下代码段：

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

如果我理解正确，你应该在你的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 3

如果我明白了，你只需要将“line-height”设置为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>

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

3 个答案: