CSS стиль оформления таблицы

Question

У меня есть таблица, где мне нужна колонка/стол, чтобы она была красной, но с слегка закругленным углом, чтобы быть более гладким, чем прямой край, но мне также нужно пробелить ширину между заголовком или радиус будет бессмысленным. Единственный вариант, о котором я могу думать, - создать пустой th для разделителя. Но предпочел бы исправление CSS.

Код

.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> 

Возможно больше информации там тогда необходимо. Но я хотел убедиться, что ничего не пропал.

Answer 1

При проектировании стола с закругленными углами не используйте border-collapse: collapse. Запрос OP о том, что строка красная, является неопределенной ... Красные границы? Текст? Справочная информация ... Требуется специфика. Мы применим border-radius к границе стола и к первой и последней границам <th>. Смотрите комментарии в 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>