Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Melbourne, Victoria, Australia
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy How do I create a table with an external border but no internal cell borders?

    I've only got basic HTML skills (my CSS-fu is nearly non-existent), and I'm stuck working with a VERY old content manager (Web Interprise, or WIP).

    I've successfully created tables with alternating fill-colours for table-rows, but I need to create a single outlining border for the table that DOESN'T create borders for each cell.

    An example of the tables I'm talking about is here:

    http://online.justice.vic.gov.au/CA2...naround+times~

    I'm planning the table border to be 2px width, in #646464 colour, but can't figure out how to do this!

    Help?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,090
    Thanks
    15
    Thanked 246 Times in 246 Posts
    Just wrap the table in a div of the same size and give the div a border. I haven't tried it but you might try giving the tbody a border.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Just applying:

    table{border:2px solid #646464}

    should do it. No need for an extra div.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    Quote Originally Posted by SB65 View Post
    Just applying:

    table{border:2px solid #646464}

    should do it. No need for an extra div.
    Generally speaking, this will work. However, if a caption element is used and the author wants to encapsulate the caption within the border, they'll have to resort to either using a wrapper element (as DrDOS suggested) or faking a continuous border.

    A continuous border can be faked by setting left and right borders on the table and caption elements, setting a top border on the caption element, and setting a bottom border on the table element. (The last two requirements would be reversed if using a bottom caption via caption-align: bottom.) Unfortunately, this method gets significantly more complicated if you also need to accommodate tables without captions.

    Quote Originally Posted by DrDOS View Post
    Just wrap the table in a div of the same size and give the div a border.
    The key thing to note here is that the div (or other wrapper) element must be the same size as the table. Since div elements auto-expand and table elements shrink-to-fit, that's not necessarily as easy as it sounds.

    If you have a fixed width table, you can match the width of the div element to that of the table element. If your table does not have a fixed width, you may have to use something like div { display: table; } to get matching shrink-to-fit behavior.

    Quote Originally Posted by DrDOS View Post
    I haven't tried it but you might try giving the tbody a border.
    Per CSS2.1 (http://www.w3.org/Style/css2-updates...rated-borders): "Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements)."
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •