Jump to content


Photo

Table and TD borders (how do I stop double lines?)


  • Please log in to reply
6 replies to this topic

#1 Mutley

Mutley
  • Members
  • PipPipPip
  • Advanced Member
  • 765 posts

Posted 02 October 2006 - 09:19 AM

If I do:

table {
border:1px #000000 solid;
}

It puts a border around the edge, now if I do this aswell:

td {
border:1px #000000 solid;
}

It puts a border around the cells but where the cells and edge of the table meet, you get a double thick border, how do I stop this?
~ Mutley.

#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 02 October 2006 - 10:49 AM

table {
border:1px solid #000;
padding:2px;
}

Is that the effect you want?
Legend has it that reading the manual never killed anyone.
My site

#3 Mutley

Mutley
  • Members
  • PipPipPip
  • Advanced Member
  • 765 posts

Posted 02 October 2006 - 03:20 PM

In attachment:

[attachment deleted by admin]
~ Mutley.

#4 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 03 October 2006 - 10:01 AM

remove the border on the table - just have borders on the td's
follow me on twitter @PHPsycho

#5 FrOzeN

FrOzeN
  • Members
  • PipPipPip
  • Advanced Member
  • 70 posts

Posted 03 October 2006 - 10:20 AM

remove the border on the table - just have borders on the td's

That will still cause the parts where they meet to be double thickness.

I find when making table borders, I setup classes which I give to different parts of the table. Eg:
<html>
<head>
  <title>example</title>
  <style type="text/css">
    table {
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
    }

    td {
      border-top: 1px solid #000;
      border-left: 1px solid #000;
    }
  </style>
</head>

<body>

<table width="100%" cellpadding="2" cellspacing="0" border="0">
  <tr>
    <td>Item (1, 1)</td>
    <td>Item (1, 2)</td>
    <td>Item (1, 3)</td>
  </tr>
  <tr>
    <td>Item (2, 1)</td>
    <td>Item (2, 2)</td>
    <td>Item (2, 3)</td>
  </tr>
  <tr>
    <td>Item (3, 1)</td>
    <td>Item (3, 2)</td>
    <td>Item (3, 3)</td>
  </tr>
</table>

</body>
</html>

[EDIT] Update - Removed classes and moved the border-right/bottom to the table, now it's even easier. :)

#6 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 03 October 2006 - 10:28 AM

If you can cope with it give each cell a margin of 1px - it will leave a small gap between cells and IMO looks quite nice while removeing the 'complexity' of defining classes for various parts of the table. But I am very lazy! ;)
follow me on twitter @PHPsycho

#7 FrOzeN

FrOzeN
  • Members
  • PipPipPip
  • Advanced Member
  • 70 posts

Posted 03 October 2006 - 03:09 PM

If you can cope with it give each cell a margin of 1px - it will leave a small gap between cells and IMO looks quite nice while removeing the 'complexity' of defining classes for various parts of the table. But I am very lazy! ;)

Just updated my code, now it doesn't use any classes. :D




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users