I have the following table and would like a border to run across the bottom of each row.

The HTML:

<table>
    <tr>
      <th>URL</th><th>Hits</th>
    </tr>

    <tr>
      <td><div class="url">/404</div></td><td class="hits">1</td>
    </tr>

    <tr>
      <td><div class="url">/403</div></td><td class="hits">1</td>
    </tr>
</table>

The CSS:

table { padding-bottom: 25px; width: 846px; }
tr { padding: 0px 5px 0px 5px; border-bottom: 1px solid #142c2d; }
td { width: 700px; height: 29px; line-height: 29px; }
div.url { width: 700px; overflow: hidden; }
td.hits { width: 46px; text-align: right; }
td a { color: #999; }

If I put my border-bottom with the tr, it doesn't show up. If I put it with the td, it shows up but there is a gap of a few pixels, which I assume comes from default padding between table cells. However, setting td padding and margin to 0px doesn't help.

Any suggestions?

1 answer

4
points
This was chosen as the best answer

You need to set and use the border on the td.

table {
border-collapse:collapse;
}
Answered almost 10 years ago by Divya Manian
  • Thanks, I didn't know about border-collapse, which did the trick. For others, you can learn more here: http://www.westciv.com/wiki/CSS_Guide:_Element_type_properties#border-collapse Peter Robinett almost 10 years ago