Радиус границы не работает для каждой строки

Question

Радиус границы не работает, когда я устанавливаю строку в таблице. Я хочу, чтобы углы каждой строки округлялись.

<table style="border-spacing: 0 8px; border-collapse: separate;"> 
        <tbody> 
         @foreach (var item in Model.project) 
         { 
          @:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;"> 
          <td class="position">@item["position"]</td>         
          <td class="image"> 
           <img src="@item["image"]" /> 
          </td> 
          <td class="name">@item["name"]</td>        
          @:</tr> 
         } 
        </tbody> 
       </table> 

Answer 1

Я понятия не имею, что весь этот код с @, я оставил, что в коде и фиксированной остальное:

HTML:

<table style="border-spacing: 0 8px; border-collapse: separate;"> 
    <tbody> 
    @foreach (var item in Model.project) { 
     @:<tr> 
      <td class="position">@item["position"]</td>         
      <td class="image"> 
      <img src="@item["image"]" /> 
      </td> 
      <td class="name">@item["name"]</td>        
     @:</tr> 
    } 
    </tbody> 
</table> 

CSS:

tbody > tr td { 
    background-color:grey; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
} 

JSFiddle demo

Answer 2

Попробуйте CSS для таблицы -

table {border-collapse:separate;} 
tr:first-child td:first-child {border-top-left-radius:15px;} 
tr:first-child td:last-child {border-top-right-radius:15px;} 
tr:last-child td:first-child {border-bottom-left-radius:15px} 
tr:last-child td:last-child {border-bottom-right-radius:15px;} 
td {border:1px solid #000; background-color:#ccc}