CODEWITHSUNDEEP
javascripthtmlcss
bill
bill

Reputation: 101

Remove space between button cells in table

I have to create a table with button inside each cell. However, I cannot remove the white space between cells. Any idea to do it? Sorry for poor presentation. Please comment if any information required? 

    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>

Upvotes: 1

Views: 1998

Answers (3)

manolinjr81
manolinjr81

Reputation: 51

If I understood, you just need to set your "line-height" to 0, see the result.

    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>

Upvotes: 0

MrFusion
MrFusion

Reputation: 911

There is a problem with the button's borders. First, you should set the buttons to display: block.

One simple solution is to explicitly set the button's height to the cell's height (20px). See this snippet:

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>

If you don't need the buttons' borders, removing them solves the problem too (I've added a hover color to help distinguish the buttons):

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>

Upvotes: 1

user3790692
user3790692

Reputation: 72

If I understand correctly, you should use in your 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; }

Font: In HTML5, with respect to tables, what replaces cellpadding, cellspacing, valign, and align?

Upvotes: 0

Related Questions