Reputation: 65

Removing invisible borders from table with CSS

I have a div block with a table inside.

HTML:

<div id='ribbon'><table id='topMenu'>
<tr>
<td><a href='index.php'>Home</a></td>
<td><a href='links.php'>Links</a></td>
<td><a href='about.php'>About</a></td>
</tr>
</table></div>

CSS:

#ribbon {
    height: 40px;
    background-color: #C2F4FF;
    font-size: 11pt;
    line-height: 40px;
    padding: 0 0 5px 20px; }

a { text-decoration: none; }

#topMenu { height: 20px; }

#topMenu td { padding: 0 10px 0 10px; }

#topMenu td:hover { background-color: red; }

Here's a 100% height screenshot of div with pointer over "Home": http://i.imm.io/1f7fd.png

I think, invisible table borders are the reason of those gaps between red area and div top and bottom sides. I would like to know about how to expand that td thing to the real 100% height so that were no gaps, and make red cell occupy the whole div height.

Upvotes: 0

Answers (4)

George

Reputation: 36794

Add the following styles to your CSS:

#topMenu{
    border-spacing:0;
    border-collapse:collapse;
}

Here's a JSFiddle

But please don't use a table for non-tabular data - See M1K1O's answer. Despite what you may/probably will hear, table's do have their uses, but this isn't one of them.

Upvotes: 4

m1k1o

Reputation: 2364

Try use <ul> <li> instead of <table>:

<div id='ribbon'>
    <ul id='topMenu'>
        <li><a href='index.php'>Home</a></li>
        <li><a href='links.php'>Links</a></li>
        <li><a href='about.php'>About</a></li>
    </ul>
</div>

css

#ribbon {
    background-color: #C2F4FF;
    font-size: 11pt;
    line-height: 40px;
    padding: 0 0 5px 20px;
}
a {
    text-decoration: none;
}
#topMenu {
    height: 20px;
    margin:0 padding: 0;
}
#topMenu li {
    padding: 0 10px 0 10px;
    float:left;
    list-style-type:none;
}
#topMenu li:hover {
    background-color: red;
}

http://jsfiddle.net/d4eqq/

Upvotes: 3