Remove spaces between TD cells

HTML & CSS
1

i’ve looked this up everywhere and i’ve tried all of the recommendations and can’t figure it out… and yes i’d rather do it in CSS but the client insists on using TABLES…

the problem can be seen at http://userw.com/HMS/ - the navigation button at the top for ‘home’, ‘control panel’, etc… how do i put on ly a very thin 1 pixel space between td elements…

here is the coding i’m using:

<table class=“menutable” height=“41px”>
<tr>
<td style=“background-image:url(images/top_bar_01.jpg); background-repeat:repeat-x; width:11px;”>Home</td>
<td> </td>
<td style=“background-image:url(images/top_bar_01.jpg); background-repeat:repeat-x; width:82px;”>Control Panel</td>
<td width=“1px”> </td>
<td style=“background-image:url(images/top_bar_01.jpg); background-repeat:repeat-x; width:88px;”>Quick Stats</td>
</tr>

</table>

The width of 1px ends up putting about 10px in between each element…

i HATE tables…

2

To do that you style the table with CSS.

3

Replace the table with something like:

<div id="header">
  <h1><a href="#">HMSPANEL</a></h1>
  

[B]<ul id="nav-main">
<li><a href="#" id="nav-home">Home</a></li>
<li><a href="#" id="nav-control">Control Panel</a></li>
<li><a href="#" id="nav-quick-stats">Quick Stats</a></li>
</ul>[/B]


  <div class="menu">
    <img src="images/cp_logo_silver.png"/>Welcome <a href="#">Admin</a>! | <a href="#">Help</a> | <a href="#">Settings</a> | <a href="#">Logout</a></div>
</div>

CSS:

#nav-main {
background:url(images/top_bar_01.jpg) repeat-x;
width:250px;
overflow:hidden;
border:1px solid #fff;
height:41px;
list-style:none;
float:left;
}
#nav-main li {
float:left;
line-height:41px;
}
#nav-main li a { color:#fff; }

#header h1 { width:128px; } /* add this */
#header:after { content:"."; clear:both; display:block; height:0; visibility:hidden; }

Note: I didn’t test in IE but let me know if you have issues.

4

Well try puttong cellspacing=“1px” on the table…that should space them out. Thoguh as others have posted, it’s best to just convert.

5

You could do this:


.menutable td{
    border-right:1px solid #000;
}

And then remove the empty td elements.


    <table class="menutable" height="41px">
        <tr>
            <td style="background-image:url(http://userw.com/HMS/images/top_bar_01.jpg); background-repeat:repeat-x; width:11px;">Home</td>
            <td style="background-image:url(http://userw.com/HMS/images/top_bar_01.jpg); background-repeat:repeat-x; width:82px;">Control Panel</td>
            <td style="background-image:url(http://userw.com/HMS/images/top_bar_01.jpg); background-repeat:repeat-x; width:88px;">Quick Stats</td>
        </tr>
    </table>

However as mentioned above it would be easier without a table and without using those inline styles.

6

thank you Paul - that worked…