Solved

Table border gap

Posted on 2010-09-10
6
528 Views
Last Modified: 2012-08-13
Hi Experts,

I have attached an image of a simple html table and my goal is to have a red border beneath the <tr><th>.  So I set the css border property for <th> and as you can see there are space between the lines.  I'd like it to appear as one continuous line accross the top to table.

Here is the CSS for the <th>:

#rateTable th {
      
      padding:3px 3px 2px 3px;
      font-size:.9em;
      font-family:Arial, Helvetica, sans-serif;
      border-bottom:thin red solid;
}

How can I do this in CSS?

Thanks

HNM sample table image
0
Comment
Question by:HelpNearMe
6 Comments
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 500 total points
ID: 33651768
Your table tag needs to says "cellspacing=0".  I don't believe that can be done in CSS.
0
 
LVL 2

Expert Comment

by:Tordan
ID: 33651769
the gap is being caused by the padding.
the common way to do this is to test an additional table so that underline is part of the 'outer' table and the text are part of 'inner' tables.
0
 
LVL 2

Expert Comment

by:Tordan
ID: 33651773
errrr
... is to NEST an additional table...
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 33651775
Demo of with and without:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
td {background-color: #aaaaaa;} 
-->
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;</td><td>&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</table>
&nbsp;
<table summary="">
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;</td><td>&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 51

Expert Comment

by:HainKurt
ID: 33651825
may help
<style>

table {

      border-spacing:0px;

      border:solid 1 gray;

      cell-spacing:0px;

}

.underlined {

      padding:3px 3px 2px 3px;

      font-size:.9em;

      font-family:Arial, Helvetica, sans-serif;

      border-bottom:solid 3px red;

      text-align:middle;

}

</style>



<table cellspacing=0>

<tr>

	<td class=underlined>Term</td>

	<td class=underlined>Our Rate</td>

	<td class=underlined>Bank Rate</td>

</tr>

<tr>

	<td>1 Year fixed</td>

	<td>3.95%</td>

	<td>5.89%</td>

</tr>

<tr>

	<td colspan=3>Updated August 13, 2010</td>

</tr>

</table>

Open in new window

0
 

Author Closing Comment

by:HelpNearMe
ID: 33652019
I appreciate the replies, but DaveBaldwins did the trick.

Thanks!
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now