Свойство и граница-collapse:collapse радиуса границы CSS3 не смешиваются. Как я могу использовать радиус границы для составления свернутой таблицы со скругленными углами?

Насколько я знаю единственный способ, которым Вы могли сделать это, будет состоять в том, чтобы изменить все ячейки как так:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

И затем получить границу в нижней части и назад

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-child не допустимо в ie6, но если Вы используете border-radius, я предполагаю, что Вы не заботитесь.

РЕДАКТИРОВАНИЕ:

После рассмотрения Вашей страницы в качестве примера, кажется, что можно быть в состоянии работать вокруг этого с интервалом ячейки и дополнением.

толстые серые границы, которые Вы видите, являются на самом деле фоном таблицы (Вы видите это ясно при изменении цвета рамки на красный). Если Вы обнуляете cellspacing (или эквивалентно: td, th { margin:0; }), серые "границы" исчезнут.

РЕДАКТИРОВАНИЕ 2:

я не могу найти способ сделать это только с одной таблицей. При изменении строки заголовка на вложенную таблицу Вы могли бы возможно быть в состоянии получить эффект, который Вы хотите, но это будет больше работы, и не динамичное.

Необходимо будет, вероятно, поместить другой элемент вокруг таблицы и стиля это с округленной границей.

рабочий проект определяет, что border-radius не относится к элементам таблицы, когда значение border-collapse collapse.

Лучшее решение до сих пор прибывает из Вашего собственного решения, и оно идет как это:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Следующий метод работает (протестирован в Chrome) с использованием box-shadow с разбросом 1px вместо «реальной» границы.

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}