CODEWITHSUNDEEP
javascriptjqueryhtmlcss
achalk
achalk

Reputation: 3459

How can I eliminate all space between block divs?

In the fiddle below, I've created a 16x16 table using jQuery. table fiddle

Here is the CSS:

td {
width: 30px;
height: 30px;
background-color: blue;
border: 1px solid red;
display: inline-block;
}

And here is the jQuery:

$(document).ready(function() {
    $('body').append('<table></table>')
    for (var i=1; i<=16; i++) {
        $('table').append('<tr></tr>');
        for (var j=1; j<=16; j++) {
            $('table:nth-last-child(1)').append('<td></td>');
        }
    }
});

As it stands, there is white space between each row of the table, and I would like to remove it. Can anyone offer advice on how to achieve this?

Things I've tried:

  1. A reset.css file.

  2. Using divs instead of a table (see this other fiddle or the alternate jquery below (CSS same as before but targeting has been changed to .container)

    $(document).ready(function() {
    for (var i=1; i<=16; i++) {
        $('body').append('<div class="row"></div>');
        for (var j=1; j<=16; j++) {
            $('body:nth-last-child(1)').append('<div class="container"></div>');
        }
    }
});

So, can anyone help me remove the white space?

Upvotes: 3

Views: 58

Answers (1)

paulgv
paulgv

Reputation: 1828

Part of the problem is that you're appending <td> to the <table> and not to the <tr>. Also, you should use border-collapse: collapse; to eliminate default borders from the table.

Here is a working example :

$(document).ready(function() {
    $('body').append('<table></table>')
    for (var i=1; i<=16; i++) {
        $('table').append('<tr></tr>');
        for (var j=1; j<=16; j++) {
            $('table tr:nth-last-child(1)').append('<td></td>');
        }
    }
});
table {
  border-collapse: collapse;
}
td {
  width: 30px;
  height: 30px;
  background-color: blue;
  border: 1px solid red;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Alternate example with <div>

$(document).ready(function() {
  for (var i = 1; i <= 16; i++) {
    var $row = $('<div />')
      .addClass('row');
    $('body').append($row);
    for (var j = 1; j <= 16; j++) {
      $row.append('<div class="container"></div>');
    }
  }
});
div.row {
  clear: both;
}

div.container {
  width: 30px;
  height: 30px;
  background: #ccc;
  border: 1px solid #000;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 7

Related Questions