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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    table border-radius

    Ok, what I'd like here is simple: the top row, which is the header, should have rounded borders on the left top and right top corners.

    The table has borders to better organize the data, and what happens is that I get both rounded and squared borders, if you look closely.

    Any help will be appreciated. Here's what I got so far.

    HTML
    Code:
    <div id="Search_Result">
      <table>
        <thead>
          <tr>
            <th>Action</th>
            <th>Field 2</th>
            <th>Field 3</th>
            <th>Field 4</th>
            <th>Field 5</th>
            <th>Field 6</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Result 1 - Field 1</td>
            <td>Result 1 - Field 2</td>
            <td>Result 1 - Field 3</td>
            <td>Result 1 - Field 4</td>
            <td>Result 1 - Field 5</td>
            <td>Result 1 - Field 6</td>
          </tr>
          <tr>
            <td>Result 2 - Field 1</td>
            <td>Result 2 - Field 2</td>
            <td>Result 2 - Field 3</td>
            <td>Result 2 - Field 4</td>
            <td>Result 2 - Field 5</td>
            <td>Result 2 - Field 6</td>
          </tr>
          <tr>
            <td>Result 3 - Field 1</td>
            <td>Result 3 - Field 2</td>
            <td>Result 3 - Field 3</td>
            <td>Result 3 - Field 4</td>
            <td>Result 3 - Field 5</td>
            <td>Result 3 - Field 6</td>
          </tr>
          <tr>
            <td>Result 4 - Field 1</td>
            <td>Result 4 - Field 2</td>
            <td>Result 4 - Field 3</td>
            <td>Result 4 - Field 4</td>
            <td>Result 4 - Field 5</td>
            <td>Result 4 - Field 6</td>
          </tr>
        </tbody>
      </table>
    </div>
    CSS:
    Code:
    #Search_Result {
    	width: 980px; min-width: 980px; max-width: 980px;
    	margin: 0 auto; margin-bottom: 10px;
    	background-color: #fff;
    }	/*
    	#Search_Result>div.result { 
    		display: block; 
    		background-color: #fff; 
    		border: 1px solid rgb(200,200,200); border-radius: 0px 0px 5px 5px;
    		height: 300px;
    	}
    	*/
    	#Search_Result table { 
    		width: 100%; 
    		background-color: #fff;
    		border-collapse: collapse;
    	}	#Search_Result th {
    			padding: 10px;
    			font-size: 13px; color: #fff;
    			border: 1px solid rgb(200,200,200);
    			background: rgb(135,135,135); /* Old browsers */
    			background: -moz-linear-gradient(top,  rgba(135,135,135,1) 0%, rgba(91,91,91,1) 100%); /* FF3.6+ */
    			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,135,135,1)), color-stop(100%,rgba(91,91,91,1))); /* Chrome,Safari4+ */
    			background: -webkit-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* Chrome10+,Safari5.1+ */
    			background: -o-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* Opera 11.10+ */
    			background: -ms-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* IE10+ */
    			background: linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* W3C */
    			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#5b5b5b',GradientType=0 ); /* IE6-9 */
    		} 	#Search_Result th:first-of-type { border-radius: 5px 0px 0px 0px; }		
    			#Search_Result th:last-of-type { border-radius: 0px 5px 0px 0px; }
    	#Search_Result td { padding: 2px; border: 1px solid rgb(200,200,200); }
    	#Search_Result>table>caption { font-size: 20px; border-bottom: 1px solid #000;; }
    Thanks again.
    Last edited by igordonin; 04-25-2012 at 07:10 PM.

  • #2
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well, I actually fixed it by not having border-collapse. I hate this fix. If anyone can help me do it in a cleaner way, I'd appreciated.

    Here's the fixed and tweaked CSS:
    Code:
    #Search_Result {
    	width: 980px; min-width: 980px; max-width: 980px;
    	margin: 0 auto; margin-bottom: 10px;
    	background-color: #fff;
    }	#Search_Result table { 
    		width: 100%; 
    		background-color: #fff;
    		border-collapse: separate;
    		border-spacing: 0px;
    	}	#Search_Result th {
    			padding: 10px;
    			font-size: 13px; color: #fff;
    			border: 1px solid rgb(200,200,200);
    			border-right: 0px;
    			background: rgb(135,135,135); /* Old browsers */
    			background: -moz-linear-gradient(top,  rgba(135,135,135,1) 0%, rgba(91,91,91,1) 100%); /* FF3.6+ */
    			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,135,135,1)), color-stop(100%,rgba(91,91,91,1))); /* Chrome,Safari4+ */
    			background: -webkit-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* Chrome10+,Safari5.1+ */
    			background: -o-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* Opera 11.10+ */
    			background: -ms-linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* IE10+ */
    			background: linear-gradient(top,  rgba(135,135,135,1) 0%,rgba(91,91,91,1) 100%); /* W3C */
    			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#5b5b5b',GradientType=0 ); /* IE6-9 */
    		} 	#Search_Result th:first-of-type { border-radius: 10px 0px 0px 0px; }		
    			#Search_Result th:last-of-type { border-radius: 0px 10px 0px 0px; border-right: 1px solid rgb(200,200,200); }
    	#Search_Result td { 
    		padding: 2px; 
    		border: 1px solid rgb(200,200,200); 
    		border-right: 0px;	border-top: 0px;
    	}	#Search_Result td:last-of-type { border-right: 1px solid rgb(200,200,200); }


  •  

    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
    •