CODEWITHSUNDEEP
jqueryhtmlcss
Chris Howes
Chris Howes

Reputation: 53

How can I get rid of the space between rows in a HTML table?

I am writing a little page which uses JQuery to generate a 16x16 table. Then, if you hover over a cell it will change colour. I have looked through lots of questions about this, and tried many things but they do not work, so I thought the most direct way was just to ask myself. Here is my code:

JQuery:

$(document).ready(function() {
  for(var i = 0; i < 16; i++) {
    $('table').append('<tr>');
    for(var j = 0; j < 16; j++) {
      $('table').append("<td></td>");
    }
    $("table").append("</tr>");
  }
  $('td').hover(function() {
    $(this).css("background-color", "black");
  });
  $('.clearButton').click(function() {
    $('td').css("background-color", "white");
  });
});

CSS:

/*resets*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: ' ';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*EVERYTHING ELSE*/
td {
  background-color: white;
  border: 1px solid black;
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

table {
  min-width: 500px;
  max-width: 500px;
  min-height: 500px;
  max-height: 500px;
  border-collapse: collapse;
}

HTML:

<!DOCTYPE html>
<HTML>
  <HEAD>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </HEAD>
  <BODY>
    <button class="clearButton">RESET</button>
    <table>
    </table>
  </BODY>
</HTML>

Thanks in advance!

Upvotes: 2

Views: 53

Answers (4)

tao
tao

Reputation: 90013

You're appending your <td>s to <table>, instead of appending them to <row>s.

Here's how to fix this:

$(document).ready(function() {
  for(var i = 0; i < 16; i++) {
    var tr = $('<tr />')
    for(var j = 0; j < 16; j++) {
      tr.append($('<td />'));
    }
    $("table").append(tr);
  }
  $('td').hover(function() {
    $(this).css("background-color", "black");
  });
  $('.clearButton').click(function() {
    $('td').css("background-color", "white");
  });
});

jsFiddle.

Note: I would make the border equally visible in both states, by giving it a gray color. See this version.

Upvotes: 2

Rajesh Karunakaran
Rajesh Karunakaran

Reputation: 169

Change your script like this:

  $(document).ready(function () {
    var content = '';
    for (var i = 0; i < 16; i++) {
        content += '<tr>';
        for (var j = 0; j < 16; j++) {
            content += '<td></td>';
        }
        content += '</tr>';
    }
    $('table').append(content);
    $('td').hover(function () {
        $(this).css("background-color", "black");
    });
    $('.clearButton').click(function () {
        $('td').css("background-color", "white");
    });
});

please check demo

Upvotes: 2

Amir Shahbabaie
Amir Shahbabaie

Reputation: 1412

First of all, give your td some padding 

td{padding:5px;}

Second, you need to insert td inside the rows, your current script inserts them after the rows:

$('table').find('tr').eq(i).append("<td> </td>");

And third, always include your css files before js file:

Upvotes: 1

Agam Banga
Agam Banga

Reputation: 2693

You are using the append method which automatically closes the tag if you didn't provide one. You have to create the html string & then append to the table. You can use this

$(document).ready(function() {
    var html = '';
    html += '<tbody>'
  for(var i = 0; i < 16; i++) {
    html += '<tr>';
    for(var j = 0; j < 16; j++) {
      html += "<td></td>";
    }
    html += "</tr>";
  }
  html += '</tbody>';
  $('table').append(html)
  $('td').hover(function() {
    $(this).css("background-color", "black");
  });
  $('.clearButton').click(function() {
    $('td').css("background-color", "white");
  });
});

Also check the fiddle https://jsfiddle.net/ok1n29ua/

Upvotes: 1

Related Questions