Results 1 to 8 of 8
  1. #1
    3 Star Lounger
    Join Date
    May 2003
    Location
    Mid-Cheshire, England
    Posts
    275
    Thanks
    1
    Thanked 3 Times in 3 Posts

    CSS for borders with rounded corners for tables

    I posted the following in a css newsgroup:
    I have read a number of tutorials on rounded corners for tables and I also have The CSS Anthology by Rachel Ward published by Sitepoint. As I understand all I have read 1) tables cannot have rounded corners (except with images for the corners) but by putting the table in a container that has rounded corners the table appears to have rounded corners and 2) it seems the container must have a width set.

    In a restricted access Web site I have a number of tables of different widths and heights to which I would like to add rounded corners and a border. My question is can CSS and/or corner images be used to create such a container that will adjust its size to the size of the table I place in it?

    I received the following response:Try this for your corners that will expand to any size: http:// http://www.roundedcornr.com/

    The result of trying this method is at: http://www.mewalker.co.uk/membersarea where the vertical fit is as expected but horizontally the width hasn't adjusted to the width of the table. Can anyone account for this behaviour please? Also HTML Tidy tells me that two empty divs have been trimmed and I don't understand why they are present if they have no use!

    Enlightenment would be very much appreciated. Equally an alternative way of achieving a border with rounded corners around a table would help.

  2. #2
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS for borders with rounded corners for table

    Hi Malcolm

    Try changing the CSS section
    <pre>.roundedcornr_box_469779 {
    BACKGROUND: #cccccc;
    width: 380px;
    }

    ...

    }
    .roundedcornr_content_469779 {
    MARGIN: 0px 15px;
    width: 350px;
    }

    </pre>


    It currently does not have a width, you can also further improve the look by changing the table with class .style1 to have a cell spacing=10,

    Have a look at line 18 and 19

    <pre><TABLE class=style1 cellSpacing=10 align=center
    summary="This table contains the names and dates when members of Sandiway Golf Club served as President"></pre>

    Jerry

  3. #3
    3 Star Lounger
    Join Date
    May 2003
    Location
    Mid-Cheshire, England
    Posts
    275
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Re: CSS for borders with rounded corners for table

    Dear Jerry,

    Thank you for your response. The changes you propose depend upon specifying the width of the container or the width of the table plus the margins. I am seeking to have the width adjust automatically to the width of the table plus the margins. Then the dozens of tables I have in my site can have a border with rounded corners without me have to establish the width of each table. Each table would have the same css using an id to differentiate one from another.

  4. #4
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS for borders with rounded corners for table

    Got you,OK,I'll be frank I personally wouldn't use a table then in this way. However if youhave got a website that has a load of tables already set up the I suggest that you set the table to be a fixed width of say 600px and then let the .roundedcornr_box_469779 be 630px.

    You can use the CSS:

    table {width: 600px;}

    I am not a great lover of tables as they restrict you so much, whilst I was experimenting with this I had created a div class that acted as a container class that allowed me to set up the row data using the li and ul tag, it is much more controllable that way. Tables although useful for holding tabular data it should not really be used for using it to construct layout
    Jerry

  5. #5
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS for borders with rounded corners for table

    I'll take it all back, how about this:

    From your page
    <pre><STYLE type=text/css>
    .style1 {
    FONT-SIZE: x-small;
    BACKGROUND-IMAGE: url(oakveneeropt5012_6.jpg);
    COLOR: yellow;
    FONT-FAMILY: "Trebuchet MS";
    width: 100%;
    height: 100%;
    }
    </STYLE>
    </pre>


    and from the CSS file (using an arbitory 90% but adjust it yourself to see it work)
    <pre>.roundedcornr_box_469779 {
    BACKGROUND: #cccccc;
    width: 90%;

    }
    </pre>

    Jerry

  6. #6
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: CSS for borders with rounded corners for table

    <hr>The result of trying this method is at: http://www.mewalker.co.uk/membersarea where the vertical fit is as expected but horizontally the width hasn't adjusted to the width of the table. Can anyone account for this behaviour please? Also HTML Tidy tells me that two empty divs have been trimmed and I don't understand why they are present if they have no use!<hr>
    About: HTML Tidy's comment: most rounded corner schemes use one or more empty <div>s to hold background images. This approach can be criticized for introducing non-meaningful HTML (sometimes called non-semantic layout) into a document, which violates the principle of separation of content, style, and behavior. But I digress.

    With respect to the width of a <div>, it naturally takes up 100% of the horizontal space available. There is no universal CSS rule for "shrink to fit." In Firefox, if you assign your outermost <div> the id outerbox then this rule would "shrink-wrap" the div to the table and center it:

    <code>#outerbox {
    display:table;
    margin:0 auto;
    }</code>


    But that does not work in IE6 at all, and display:table does not appear to work in IE7.

  7. #7
    3 Star Lounger
    Join Date
    May 2003
    Location
    Mid-Cheshire, England
    Posts
    275
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Re: CSS for borders with rounded corners for table

    <hr>Got you,OK,I'll be frank I personally wouldn't use a table then in this way. However if you have got a website that has a load of tables already set up the I suggest that you set the table to be a fixed width of say 600px and then let the .roundedcornr_box_469779 be 630px.<hr>

    Dear Jerry,

    The site was started with FP 98 and has grown since then. This is a part of the site that records, mainly, competition results and as a means to an end at the time tables seemed appropriate. There are some 100 of these tables, two to each page and if any two of them are the same height and width I'd be pleasantly surprised.

    So you would have used lists - I'll have to think about that as a possibility. BTW I am not using tables for the layout of these pages.

  8. #8
    3 Star Lounger
    Join Date
    May 2003
    Location
    Mid-Cheshire, England
    Posts
    275
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Re: CSS for borders with rounded corners for table

    Thank you for your erudite commentary; not only interesting but pertinent. How could the discrepancies between browsers have arisen and will they ever be resolved?

Posting Permissions

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