CODEWITHSUNDEEP
htmlcsshtml-table
Pedro Estevão
Pedro Estevão

Reputation: 1074

HTML table without space between columns

I have a simple table with two columns

<table>
  <tr>
    <td>aaaaaaa</td>
    <td>bbbbbbb</td>                                        
  </tr>
  <tr>
    <td>aaaaaaa</td>
    <td>bbbbbbb</td>                                        
  </tr>
</table>

tr:hover {
    background: grey;
}

When I put the mouse pointer above the row, the background of the row changes to grey, but there is little space between the rows

enter image description here

How can I remove this little space to keep the whole row in grey?

Upvotes: 0

Views: 2481

Answers (5)

Pouya Ataei
Pouya Ataei

Reputation: 2169

Set your cellspacing and cellpading to zero on the table

Upvotes: 3

jagweb3
jagweb3

Reputation: 11

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Upvotes: 0

Arun Kumar M
Arun Kumar M

Reputation: 1601

Use cellspacing="0" cellpadding="0" in table tag, this will solve your problem.

Upvotes: 2

NooBskie
NooBskie

Reputation: 3841

Here's a Codepen http://codepen.io/noobskie/pen/WQvjBx

set your cell-spacing to 0

for html5 just add this to your css

border-collapse: collapse

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

table {
    border-collapse: collapse;
}

Upvotes: 9

Related Questions