| igordonin |
04-25-2012 03:12 PM |
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. |
