CSS table border styling - css

Question

I have a table where I'd like the row/table head to be red, but with a slightly rounded corner to be smoother than a straight edge, but I also need to space the width between the heading or the radius would be pointless. Only option I can think of is creating an empty th for a divider. But would prefer a CSS fix.
Code
.restaurant {
width: 80%;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
z-index: -1;
}
.restaurant tr {
width: 100%;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-spacing: 5px;
z-index: -1;
}
.restaurant td {
height: 100%;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #FFFFFF;
z-index: -1;
}
.restaurant th {
line-height: 15px;
background-color: #DE0000;
color: #FFFFFF;
border: 5px solid #FFFFFF
border-spacing: 10px;
border-radius: 4px;
}
html
<table class="restaurant">
<tr>
<td colspan="2">
<table class="restaurant-corners">
<tr>
<td width="10%">
<img src="/css/images/menu-corner-top-left.png" class="corners">
</td>
<td width="80%">
</td>
<td width="10%">
<img src="/css/images/menu-corner-top-right.png" class="corners" align="right">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table class="restaurant-logo" cellspacing="0">
<tr>
<td colspan="3">
<center><img src="/css/uncletoms.png"></center>
</td>
</tr>
<tr>
<th width="80%">
<h2>Breakfast</h2>
</th>
<th width="20%">
<h2>Drinks</h2>
</th>
</tr>
</table>
Probably more information there then needed. But I wanted to make sure I didn't missing anything.

Answer 1

When designing a table with rounded corners, do not use border-collapse: collapse. OP's request for row to be red is vague...Red borders? Text? Background?...Need specifics. We will apply border-radius to the table's border and to the first and last <th> borders. See the comments in the Snippet:
section {
padding: 20px 10px;
width: 100%;
height: auto;
border-bottom: 3px ridge #FF6;
margin: 0 5px 20px;
}
table.x {
position: relative;
padding: 0;
box-shadow: 0 1px 9px 1px #ccc;
/* This will round the outside border on all 4 corners */
/* If you want only the head to have rounded corners uncomment *1* ruleset and remove or comment *2*/
/* border-top-left-radius: 6px;
border-top-right-radius: 6px;
*/
border-radius: 6px;
margin: 20px auto;
table-layout: fixed;
width: 50%;
height: 100%;
max-height: 550px;
}
.x th {
color: #FFF;
background: #2C7EDB;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.x tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.x tr:nth-child(even) {
background-color: #D3E9FF;
color: #333;
}
.x td {
border-style: solid;
border-width: 1px;
border-color: #264D73;
padding: 5px;
text-align: left;
vertical-align: top;
position: relative;
}
/* Next 2 rulesets are used to create rounded corners to the inner borders of the head */
/* Remove or comment the last 2 rulesets if you don't want the bottom corners rounded */
.x thead th:first-child {
border-top-left-radius: 6px;
}
.x thead th:last-child {
border-top-right-radius: 6px;
}
.x tbody tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<section>
<table class="x">
<caption>table.x</caption>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
</section>