Jump to content

Archived

This topic is now archived and is closed to further replies.

Mutley

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites
table {
border:1px solid #000;
padding:2px;
}

Is that the effect you want?

Share this post


Link to post
Share on other sites
[quote author=ToonMariner link=topic=110213.msg445854#msg445854 date=1159869667]
remove the border on the table - just have borders on the td's
[/quote]
That will still cause the parts where they meet to be double thickness.

[s]I find when making table borders, I setup classes which I give to different parts of the table.[/s] Eg:
[code]<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>[/code]

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

Share this post


Link to post
Share on other sites
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! ;)

Share this post


Link to post
Share on other sites
[quote author=ToonMariner link=topic=110213.msg445864#msg445864 date=1159871330]
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! ;)
[/quote]
Just updated my code, now it doesn't use any classes. :D

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.