Remove space between button cells in table

Question

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>

possible duplicate of [Space between two rows in a table?](http://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table) — Taylor Buchanan, Mar 01 '15 at 06:21
possible duplicate of [how to remove unwanted space between rows and columns in table](http://stackoverflow.com/questions/2279396/how-to-remove-unwanted-space-between-rows-and-columns-in-table) — easwee, Mar 01 '15 at 10:36
There is no space between the cells. A question should specify what the problem is, in directly observable terms, not in terms of an assumed cause (especially since the assumption so often fails). — Jukka K. Korpela, Mar 01 '15 at 13:31

score 1 · Accepted Answer · answered Mar 01 '15 at 07:33

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>

Just curious, which one was it, the first or second one? – MrFusion Mar 01 '15 at 07:41 — MrFusion, Mar 01 '15 at 07:41

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

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?

edited May 23 '17 at 12:28

Community

1
1

answered Mar 01 '15 at 06:20

user3790692

72
9

score 0 · Answer 3 · answered Mar 01 '15 at 07:42

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>

Remove space between button cells in table

3 Answers3