Click here to Skip to main content
11,714,345 members (81,631 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript PHP CSS3 HTML5
I want to round the edges of a table. I use a code to achieve this.

This is the relevant CSS code.

#table-list {
    background-position:left;
    border: 1px solid #e3e3e3;
    background-color: #f2f2f2;
         border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
 

 
}


Html code of its is mentioned below.

<table width="383" id="table-list">

but it didn't give rounded edges. Is any error in that code?? Please help me, if you know. Thank you.
Posted 5-Jun-12 5:48am
Edited 5-Jun-12 5:49am
v2

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Here is the code sample I made:
<html>
    <head>
        <title>...</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css"><!--
            table {
                        -webkit-border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px;
                        background-color:#ACE34D; padding:8px;
            }
            td {
                        border: thin solid; padding-left:2em; padding-right:2em; 
                        -webkit-border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px;
            }
        --></style>
    </head>
<body>
 
<table>
<tr><td>Some data</td><td>More data</td><td>&nbsp;&hellip;&nbsp;</td></tr>
<tr><td>Some data</td><td>More data</td><td>&nbsp;&hellip;&nbsp;</td></tr>
</table>
 
</body>
</html>

It works, tested.

I did it with the help of this rounded corner generator: http://cssround.com/[^], added my own styles to make it look acceptable, without intersections of the borders and with proper padding.

See also:
http://www.css3.info/preview/rounded-border/[^],
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers[^].

The trick is to meet the requirements of different layout engines at once.

—SA
  Permalink  
v6
Comments
Tim Corey at 5-Jun-12 13:22pm
   
When you create something like this, testing it in jsFiddle is a great way to be sure it works. You can also then share the URL with the OP so that they can see it in action right away. Just a thought. +5 from me.
SAKryukov at 5-Jun-12 13:26pm
   
Thank you for the good advice, Tim.
As to sharing the URL -- to me, it's too much buzz for such a simple question. Anyone who is interested can use copy/paste from this page into some HTML file to see the effect it no time.
--SA
VJ Reddy at 5-Jun-12 13:24pm
   
Nice answer. 5!
SAKryukov at 5-Jun-12 13:27pm
   
Thank you, VJ.
--SA
Jeremy Shin Woo at 5-Jun-12 13:37pm
   
Thanks
SAKryukov at 5-Jun-12 14:59pm
   
You are very welcome.
Good luck, call again.
--SA
losmac at 5-Jun-12 14:57pm
   
Good work! +5!
SAKryukov at 5-Jun-12 14:59pm
   
Thank you, Maciej.
--SA
thatraja at 5-Jun-12 15:24pm
   
My 5! Already you used the same links herebefore, nice links.
SAKryukov at 5-Jun-12 15:31pm
   
Yes, I did -- they are useful. Thank you, Raja.
--SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 420
1 Maciej Los 229
2 Richard MacCutchan 220
3 OriginalGriff 170
4 F-ES Sitecore 140
0 Sergey Alexandrovich Kryukov 545
1 CHill60 375
2 Maciej Los 324
3 Richard MacCutchan 310
4 OriginalGriff 260


Advertise | Privacy | Mobile
Web01 | 2.8.150819.1 | Last Updated 5 Jun 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100