Table's title row's rounded corners border
Table's title row's rounded corners border
(OP)
Hi everyone
Here is my table's css disign:
Why do I not get rounded corners?
Why table's cell's borders has been vanished ?
Thanks
Here is my table's css disign:
CODE
<!DOCTYPE html>
<html>
<head>
<title>To forum</title>
<style>
table
{
width: 80%;
margin: auto;
border-collapse: collapse;
}
tr.title
{
border-radius: 15px 15px 0px 0px;
border: 3px solid #6b8e23;;
}
</style>
</head>
<body>
<table>
<tr class="title">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th colspan="3">F</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>e</td>
<td>d</td>
<td>e</td>
<td>f</td>
</table>
</body>
</html> Why do I not get rounded corners?
Why table's cell's borders has been vanished ?
Thanks
Talk To Other Members
RE: Table's title row's rounded corners border
If I get your intentions right, this is the only way I know :
CODE --> CSS
table { width: 80%; margin: auto; border-spacing: 0; } tr.title th { border-top: 3px solid #6b8e23; border-bottom: 3px solid #6b8e23; } tr.title th:first-child { border-left: 3px solid #6b8e23; border-top-left-radius: 15px; } tr.title th:last-child { border-right: 3px solid #6b8e23; border-top-right-radius: 15px; }Feherke.
feherke.github.io
RE: Table's title row's rounded corners border
Title header is exactly what I want as for the rest of the table's borders, I'll try to see if I can make progress.