SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tables with border-radius

    Hi hope everyone is good today,

    I'm wondering if it's possible to create a rounded corner on my table with the CSS3 'border-radius: 15px;'
    as you can see the border is set to collapse, theres a little styling, is it possible with pure CSS?

    Please reveiw and let me know


    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <style type="text/css" media="projection, screen" >
    
    body table {
            border-collapse : collapse;
            font-size: 16px;
            margin : 0 0 20px 20px;
    }
    
    table td {
        padding : 0 5px;
    }
    
    table caption {
        font-size : 18px;
        letter-spacing: 5px;
        text-align : center;
        margin-bottom : 10px;
    }
    
    table thead {
        border : 2px solid rgb(190, 026, 018);
        border-width : 2px 2px 0 2px;
        background: rgba(190, 026, 018,0.6);
        
    }
    
    table thead tr {
        height : 40px;
    }
    
    table thead th {
        padding : 0 5px;
        letter-spacing: 2px;
    }
    
    table tbody {
        border : 2px solid rgb(179, 177, 177);
        border-color : rgb(179, 177, 177) rgb(190, 026, 018) rgb(179, 177, 177) rgb(190, 026, 018);
    }
    
    table tfoot {
        border : 2px solid rgb(190, 026, 018);
        border-width : 0 2px 2px 2px;
        text-align: center;
        background : rgba(190, 026, 018,0.6);
    }
    
    table tr {
        height : 40px;
    }
    table tbody tr:nth-of-type(2n+1) {
        background-color:rgba(152,228,215,0.6);
    }
    
    table col.firstColumn {
        width : 22%;
    }
    
    table col.middleColumns {
        width : 31%;
    }
    
    table col.lastColumn {
        width: 16%;
    }
    
    
    
    
    
    </style>
    <title>A table of Numbers for house's</title>
    </head>
    <body>
    <table>
            <caption>Building Models</caption>
            <colgroup>
                <col class="firstColumn" />
                <col class="middleColumns" span="2" />
                <col class="lastColumn" />
            </colgroup>
            <thead>
                <tr>
                    <th>Model</th>
                    <th>Total Sq. Ft.</th>
                    <th>Sphere Size</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td></td>
                    <td colspan="2">Call us about custom pricing!</td>
                    <td></td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Class IA</td>
                    <td>4700 square ft.</td>
                    <td>50 ft. 5/8 sphere</td>
                    <td>$150,000</td>
                </tr>
                <tr>
                    <td>Class IB</td>
                    <td>4700 square ft.</td>
                    <td>35 ft. 5/8 sphere</td>
                    <td>$125,000</td>
                </tr>
                <tr>
                    <td>Class IIA</td>
                    <td>4700 square ft.</td>
                    <td>50 ft. 5/8 sphere</td>
                    <td>$112,000</td>
                </tr>
                <tr>
                    <td>Class IIB</td>
                    <td>4700 square ft.</td>
                    <td>35 ft. 5/8 sphere</td>
                    <td>$97,000</td>
                </tr>
                <tr>
                    <td>Class IIIA</td>
                    <td>4700 square ft.</td>
                    <td>45 ft. 5/8 sphere</td>
                    <td>$84,000</td>
                </tr>
                <tr>
                    <td>Class IIIB</td>
                    <td>4700 square ft.</td>
                    <td>35 ft. 5/8 sphere</td>
                    <td>$73,000</td>
                </tr>
            </tbody>
        </table>
    </body>

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    There's no (or little) support for using it on the <table> element directly. However, you could use it on the <td> element with a combination of :first-child pseudo selectors.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It takes a little rangling as you have to take into account the behavior of border collapse OR that element overlap, so if you round the parent element you need to round the children as well which kinda make rounding the parent element redundant in some cases.

    In other words, even w/o border collapse you would need to round off the four individual corner table cells as well, possibly using the method suggested by Maleika.

    Rounded corners with border collapse requires a bit more trickery. Here is how I do it:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Untitled Page</title>
    		<style type="text/css" media="screen"><!--
    td, th{height:90px; width:90px; }
    table {  border:1px solid red; padding:0;   border-collapse: separate; border-radius:15px; border-spacing:0}
    td, th  { text-align: center; vertical-align: middle; background: pink; border: none; }
    td + td, th + th {border-left:1px solid #555}
    th, tr td  {border-bottom:1px solid #555; }
    tfoot td {border-bottom:none}
    td:first-child {border-left:none}
    td:last-child {border-right:none}
    thead +tr td,  tr+ tr td, tfoot td{border-top:none;}
    
    th:first-child { -webkit-border-radius:15px 0 0 0; border-left:none}
    th:last-child{ -webkit-border-radius:0 15px 0 0;border-right:none }
    tfoot td:first-child{  -webkit-border-radius:0 0 0 15px ;}
    tfoot td:last-child{  -webkit-border-radius:0 0 15px 0;}
    --></style>
    	</head>
    
    	<body bgcolor="#ffffff">
    		<table  border="1" cellspacing="2" cellpadding="0">
    			<thead>
    				<tr>
    					<th>Hello</th>
    					<th>HI</th>
    					<th>HOLA!!!</th>
    					<th>It's fun to style things!</th>
    					<th></th>
    				</tr>
    			</thead>
    			<tr>
    				<td></td>
    				<td>YEs, it is!</td>
    				<td></td>
    				<td></td>
    				<td></td>
    			</tr>
    			<tr>
    				<td></td>
    				<td>YEs, it is!</td>
    				<td></td>
    				<td></td>
    				<td></td>
    			</tr>
    			<tfoot>
    				<tr>
    					<td>aaa</td>
    					<td></td>
    					<td></td>
    					<td></td>
    					<td></td>
    				</tr>
    			</tfoot>
    		</table>
    	</body>
    
    </html>
    Hope that helps

  4. #4
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool thanks for an example, this is good because I can now change the background color, and transparency. Now I can make it different in the future with CSS adjustments and keep those spiffy corners.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Really Ray

    You know that doctype puts IE (including IE9) into quirks mode and loses the corners.
    (Firefox will need empty-cells:show on the table element to show the empty element borders)

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You know that doctype puts IE (including IE9) into quirks mode and loses the corners.


    LOL. Embarrassed. WOW. Dunno how I missed that part.

    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    is what I meant to put there...

    Thanks for the catch, Paul.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    LOL. Embarrassed. WOW. Dunno how I missed that part.
    No worries (I do that as well when looking for a solution and then forget everything else.)

  8. #8
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    There's no (or little) support for using it on the <table> element directly. However, you could use it on the <td> element with a combination of :first-child pseudo selectors.
    I noticed is also does not work on <tr> or <th> tags. Darn, so I'd say the best option for now is to use tools.sitepoint.com/spanky to produce rounded edges on tables, because of the lack for css's border-radius support on tables.

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    border-radius does work on <tr> and <th>, though you'd need to set them to display:block or inline-block.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

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