Click here to Skip to main content
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/[^],
^].
 
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 485
1 mhegazy94 460
2 Kornfeld Eliyahu Peter 315
3 Ravi Bhavnani 200
4 Shemeemsha RA 160
0 Sergey Alexandrovich Kryukov 6,890
1 OriginalGriff 6,761
2 CPallini 5,350
3 George Jonsson 3,609
4 Gihan Liyanage 2,797


Advertise | Privacy | Mobile
Web04 | 2.8.140922.1 | Last Updated 5 Jun 2012
Copyright © CodeProject, 1999-2014
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