How to make a table td border actually only 1 px

cg_medistox
cg_medistox used Ask the Experts™
on
I have applied some css to a table on my site http://dev.purepages.com/chris/swansway/carinfo.php?car=50
All i need to know is how to make the table at the bottom only 1px on the internal td's?

I understand that each td is having a border applied to itso it creates a double border appearance, how can i make it so that it only creates a 1px border?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2007

Commented:
You just need to apply "border-bottom: 1px;" to your td declaration for that table in CSS.

Author

Commented:
Thats nearly it but it appears to be taking the border off completely.

If you can see it doubles up the borders on all the cells and if i do that border-right:1px it completely removes the border?
Mark StegglesWeb Developer
Top Expert 2006

Commented:
Hello cg_medistox,

use this css property

border-collapse:collapse;

Regards,

Steggs
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
Try it in different browsers, as I remember, IE and Firefox have border issues.
Web Developer
Top Expert 2006
Commented:
just to clarify:

table tr td {border-collapse:collapse;border:1px solid #369}

Commented:
cg_medistox,

I've built an HTML page with a two cell table within it and two CSS styles that are applied to the table cells.

• The top table has the ".top-table" CSS style applied to it. The ".top-table" has a 1 pixel border on the left, top and right side and the bottom is set to zero pixels.

• The bottom table has the ".bottom-table" CSS style applied to it. The ".bottom-table" has a 1 pixel border set on all four sides of the table.

Below is the code for the HTML... copy the code below, and strip out what you need and see if this works for your needs.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

      <head>
            <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
            <title>table borders</title>
            <style type="text/css" media="screen"><!--
.top-table { padding: 12px; border-color: black; border-style: solid; border-width: 1px 1px 0; }
.bottom-table { padding: 12px; border: solid 1px black; }
--></style>
      </head>

      <body>
            <table width="519" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                        <td class="top-table">This table has the &quot;.top-table&quot; CSS style applied to it. The &quot;.top-table&quot; has a 1 pixel border on the left, top and right side and the bottom is set to zero pixels.</td>
                  </tr>
                  <tr>
                        <td class="bottom-table">This table has the &quot;.bottom-table&quot; CSS style applied to it. The &quot;.bottom-table&quot; has a 1 pixel border set on all four sides of the table.</td>
                  </tr>
            </table>
            <p></p>
      </body>

</html>

Author

Commented:
Sorry Chiselneck, i appreciate the effort you put into answering this question but the border collapse was the solution i needed.

Steggs - I had to do an adaptation of the solution you provided as that solution applies everything to every table in my page, hence a lot of lines everywhere.

I managed to adapt it to the table i need to though so thanks.
Mark StegglesWeb Developer
Top Expert 2006

Commented:
Yes, my post would apply the css to all table cells. It is up to you which tables you apply it to, therefore, I feel that grade B instead of grade A is unfair :(

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial