回答:
border-radiusはtdにのみ適用でき、trまたはtableには適用できません。私はこれらのスタイルを使用して、丸みを帯びたコーナーテーブルのためにこれを回避しました：
table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }必ずすべてのベンダープレフィックスを指定してください。ここだアクションで、それの例が。
border-collapse: separate;場合、これは機能しません。
separateクローム44のために必要とされている
これは、古いスレッドですが、私は当初の目標を持つことが明らかであったことを他の回答にOPからのコメントを読んで気づいborder-radiusた行の上に、とのギャップの間行。現在のソリューションが正確にそれをしているようには見えません。theazureshadowの答えは正しい方向に向かっていますが、もう少し必要なようです。
そのようなことに興味がある人のために、これは行を分離し、各行に半径を適用するフィドルです。（注：Firefoxには現在background-color、境界の半径での表示/クリッピングにバグがあります。）
コードは次のとおりです（そして、azureshadowが指摘したように、以前のブラウザーサポートでは、border-radius追加する必要のあるさまざまなベンダープレフィックスが必要です）。
table {
border-collapse: separate;
border-spacing: 0 10px;
margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
border: solid 1px #000;
border-style: solid none;
padding: 10px;
background-color: cyan;
}
td:first-child {
border-left-style: solid;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
td:last-child {
border-right-style: solid;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}ボーナス情報：に境界線が設定されborder-radiusているテーブルには影響しません。そして、場合は問題ではありませんに設定されている、または-itは無視されます。border-collapse: collapse;tdborder-radiustabletrtd
tr要素は、border-radiusを尊重します。純粋なhtmlとcssを使用できますが、javascriptは使用できません。
JSFiddleリンク：http ://jsfiddle.net/pflies/zL08hqp1/10/
tr {
border: 0;
display: block;
margin: 5px;
}
.solid {
border: 2px red solid;
border-radius: 10px;
}
.dotted {
border: 2px green dotted;
border-radius: 10px;
}
.dashed {
border: 2px blue dashed;
border-radius: 10px;
}
td {
padding: 5px;
}<table>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr class='dotted'>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class='solid'>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr class='dotted'>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr class='dashed'>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</table>この場合、国境を崩すことは間違っていると思います。それらを折りたたむとは、基本的に2つの隣接するセル間の境界が共有されることを意味します。これは、半径が与えられたときにどの方向に湾曲する必要があるかが不明確であることを意味します。
代わりに、最初のTDの2つの左隅と最後のTDの2つの右隅に境界半径を指定できます。あなたは使用することができますfirst-childし、last-childセレクタtheazureshadowにより示唆されるように、これらは悪いIEの古いバージョンでサポートすることができます。ちょうどのようなクラスを定義する方が簡単かもしれない.first-columnと.last-column、この目的を果たすために。
ここでクレジットを取得しようとはせず、すべてのクレジットは@theazureshadowの返信に送られますが、個人的には、最初の行のセルでは<th>なく、いくつかあるテーブルにそれを適応させる必要がありました<td>。
@theazureshadowのソリューションを使用したい人のために、ここに変更したバージョンを投稿していますが、私のよう<th>に、最初のバージョンをいくつか持ってい<tr>ます。クラス「reportTable」は、テーブル自体にのみ適用する必要があります。
table.reportTable {
border-collapse: separate;
border-spacing: 0;
}
table.reportTable td {
border: solid gray 1px;
border-style: solid none none solid;
padding: 10px;
}
table.reportTable td:last-child {
border-right: solid gray 1px;
}
table.reportTable tr:last-child td{
border-bottom: solid gray 1px;
}
table.reportTable th{
border: solid gray 1px;
border-style: solid none none solid;
padding: 10px;
}
table.reportTable th:last-child{
border-right: solid gray 1px;
border-top-right-radius: 10px;
}
table.reportTable th:first-child{
border-top-left-radius: 10px;
}
table.reportTable tr:last-child td:first-child{
border-bottom-left-radius: 10px;
}
table.reportTable tr:last-child td:last-child{
border-bottom-right-radius: 10px;
}必要に応じて、パッディング、半径などを自由に調整してください。それが人々を助けることを願っています！
Chrome、FF、IEの最新バージョンでは、テーブル、trs、tdsにborder-radiusを追加しても100％機能しないようです。代わりに、テーブルをdivでラップし、その上にborder-radiusを配置します。
<div class="tableWrapper">
<table>
<tr><td>Content</td></tr>
<table>
</div>
.tableWrapper {
border-radius: 4px;
overflow: hidden;
}テーブルがでないwidth: 100%場合は、ラッパーを作成できますfloat: left。クリアすることを忘れないでください。
border-collapse：seperateを使用します。そしてborder-spacing：0; ただし、tdsにはborder-rightとborder-bottomのみを使用し、border-topをthに適用し、border-leftをtr td：nth-child（1）にのみ適用します。
次に、ボーダー半径をコーナーtdsに適用できます（nth-childを使用してそれらを検索します）。
https://jsfiddle.net/j4wm1f29/
<table>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
</table>table {
border-collapse: seperate;
border-spacing: 0;
}
tr th,
tr td {
padding: 20px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
tr th {
border-top: 1px solid #000;
}
tr td:nth-child(1),
tr th:nth-child(1) {
border-left: 1px solid #000;
}
/* border radius */
tr th:nth-child(1) {
border-radius: 10px 0 0 0;
}
tr th:nth-last-child(1) {
border-radius: 0 10px 0 0;
}
tr:nth-last-child(1) td:nth-child(1) {
border-radius: 0 0 0 10px;
}
tr:nth-last-child(1) td:nth-last-child(1) {
border-radius: 0 0 10px 0;
}答えはすべて長すぎます。プロパティとしてボーダーを受け入れるテーブル要素にボーダー半径を追加する最も簡単な方法は、オーバーフローでボーダー半径を実行することです：非表示。
border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;