CSS3のborder-radiusプロパティとborder-collapse:collapseは混合しません。border-radiusを使用して、角が丸い折りたたみテーブルを作成するにはどうすればよいですか?


317

編集-元のタイトル:(折りたたみ、丸みを帯びたコーナーテーブルを作成するためborder-collapse:collapseCSS)を達成する別の方法はありますか?

テーブルの境界線を折りたたむだけでは根本的な問題は解決されないことが判明したので、議論をより反映するようにタイトルを更新しました。

CSS3 border-radiusプロパティを使用して、角が丸いテーブルを作成しようとしています。私が使用しているテーブルスタイルは次のようになります。

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

ここに問題があります。border-collapse:collapseプロパティも設定したいのですが、設定するとborder-radius機能しなくなります。border-collapse:collapse実際に使用しなくても同じ効果を得ることができるCSSベースの方法はありますか?

編集:

ここで問題を説明する簡単なページを作成しました(Firefox / Safariのみ)。

問題の大部分は、コーナーを丸くするようにテーブルを設定しても、コーナーtd要素のコーナーに影響しないことです。テーブルがすべて1色の場合はtd、最初の行と最後の行でそれぞれ上隅と下隅を丸めることができるので、これは問題にはなりません。ただし、見出しとストライプを区別するためにテーブルの背景色を変えているので、内側のtd要素にも丸い角が表示されます。

提案されたソリューションの概要:

丸い角を持つ別の要素でテーブルを囲むと、テーブルの四角い角が「にじむ」ため、機能しません。

ボーダーの幅を0に指定しても、テーブルは折りたたまれません。

ボトムtdゼロにCELLSPACINGを設定した後、まだ直角の角。

代わりにJavaScriptを使用すると、問題を回避できます。

可能な解決策:

テーブルはPHPで生成されるので、外側のth / tdsのそれぞれに異なるクラスを適用し、各コーナーを個別にスタイル設定できます。あまりエレガントではなく、複数のテーブルに適用するのが少し面倒なので、私はこれをしたくないので、提案を続けてください。

考えられる解決策2は、JavaScript(具体的にはjQuery)を使用してコーナーのスタイルを設定することです。この解決策も機能しますが、私が探しているものはまだ十分ではありません(私はうるさいです)。2つの予約があります。

  1. これは非常に軽量なサイトです。JavaScriptを最小限に抑えたいと思います
  2. border-radiusを使用することの私にとっての魅力の一部は、優雅な低下と漸進的な強化です。丸みを帯びたすべての角にborder-radiusを使用することで、CSS3対応のブラウザーでは常に丸みを帯びたサイトになり、他のブラウザーでは一貫して正方形のサイトになりたいと思っています(私はIEを見てます)。

今日、CSS3でこれを実行する必要がないように思えるかもしれませんが、私には理由があります。また、この問題はw3c仕様の結果であり、CSS3のサポートが不十分ではないため、CSS3がより広範囲にサポートされている場合でも、どのソリューションも関連性があり有用です。


2
テーブルをdivでラップし、dividerにborder-radiusと "overflow:hidden"を設定できませんか?幅/高さを修正したdivでスクロール/エキスパンドする必要がある場合、またはその親で修正する場合を除いて、テストしたところ、問題なく動作しました。
イアン

最後のCSSステートメントにはセミコロンがないと思います。
JensG 2015年

3
この質問は2009年に尋ねられました。2015年には、以下にリストされているものよりも優れたソリューションがないことに少し驚いています。W3Cはこれを数年前に修正する必要がありました。
Jonathan M

回答:


241

私はそれを考え出した。いくつかの特別なセレクターを使用する必要があります。

テーブルの角を丸める際の問題は、td要素も丸められないことでした。あなたはこのようなことをすることでそれを解決することができます:

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

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

これですべてが適切に丸められますが、border-collapse: collapseすべてを壊すという問題が残っています。

回避策は、テーブルにデフォルトを追加してborder-spacing: 0そのままにすることですborder-collapse: separate


75
HTMLをいじる代わりにborder-spacing: 0;、ボーダースタイルとして追加してみませんか?
Ramon Tayag、2011年

3
TDタグではなく、TRタグの背景色の設定に問題がありました。テーブルをストライプ化する場合は、TRではなくTDの背景色を設定していることを確認してください。
シェーバーは

TRで背景色使用する必要がある場合はどうなるでしょうか。まったく可能ですか?
Mohoch、2011年

1
border-spacing: 0;ラモンのように追加するだけで、修正されました。あなたが追加していることを確認してくださいborder-radiusborder-spacingにスタイルを<th><td>、要素ではありません<thead><tbody>
Gavin

1
私はブートストラップを使用していて、次のようなRamonのアドバイスを使用して解決策を見つけました:border-spacing: 0; border-collapse: separate;
Caner SAYGIN

84

次のメソッドは、「実際の」境界線の代わりにのbox-shadow広がりを持つを使用することで機能します(Chromeでテスト済み)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;
}

5
これは私のために働いた唯一のものです。ただし、テーブルの境界線で適切な色を取得することは困難です。
Thomas Ahle、2011年

テーブルの背景色が周囲の領域と異なる場合は使用できません。
g.pickardou 2013年

1
あなたのコードをありがとう、それはまたFirefox 26.0で動作します
maxivis

1
@ g.pickardouその問題は、テーブル要素に「overflow:hidden」を追加することで処理できます。
Val

ボックスシャドウはテーブルを大きくし、サイドがカットされます。
レイ

63

CSSのみのソリューションが必要な場合(cellspacing=0HTMLで設定する必要はありません)、1pxの境界線を許可します(border-spacing: 0ソリューションでは実行できません)、次のようにします。

  • テーブルセルにborder-rightborder-bottomを設定します(tdおよびth
  • 最初の行のセルにaborder-top
  • 最初の列のセルにaborder-left
  • first-childおよびlast-childセレクターを使用して、四隅にあるテーブルセルの適切な角を丸めます。

こちらのデモをご覧ください。

次のHTMLがあるとします。

以下の例をご覧ください。

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         
<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>


1
(恒久的な)コードを含む回答を書いてください。答えに対するコードが多い場合は、関連するビットとそれらが関連する理由の説明を投稿してください。
Samuel Harmer

3
これは優れたソリューションですが、読みにくいものでした。私はいくつかのスタイルルールを書き直し、コードの説明を追加しました。
Michael Martin-Smucker、

テーブルにも半径を適用します。そうしないと、テーブル自体に背景を適用すると奇妙に見えます。
ヤギ

何をしないtable.Infoクラスは何もして行うようになりましたか?
Pylinux

28

???のtable{border-spacing: 0}代わりに使用してみましたtable{border-collapse: collapse}か?


ありがとう、これは私がする必要があることをさせてくれました(これには、以下のすべてのTDを含む「丸みを帯びたコーナー」ボックスの外側の上部にある一連のTH要素が関係しました)
RonLugge

12
問題border-spacing: 0は、1pxの境界線を作成できないことです。境界線が崩れる代わりに積み重なるからです。
Michael Martin-Smucker

1
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;私が必要とするものを正確に生み出しました。
Milad.Nozari 2018

23

おそらく、テーブルの周りに別の要素を配置し、丸みを帯びた境界線でスタイルを設定する必要があります。

ワーキングドラフトを指定border-radiusの値が時にテーブル要素には適用されませんborder-collapseですcollapse


それも私が検討したことですが、テーブルを囲むdivを作成し、丸みを帯びたコーナーを持つように設定した場合、正方形のテーブルコーナーはまだにじみ出ています。新しく投稿された例を参照してください。
vamin 2009年

私が見つけた最高の妥協点は、テーブルにTHEADブロックを追加し、それに灰色の背景を適用することでした(テーブル自体に#eeeを使用)。ヘッダーセルが、表の前ではなく表の境界線からオーバーフローしました。次に、テーブルの境界線を3pxに増やして、オーバーフローを非表示にしました。
user59200 2009年

3
@vamin "ブリードスルー"-使用しない場合overflow:hidden;
ブライアンマッカッション2013年

したがって、この状況では誰でもこれらのページの下部から私のソリューションを使用できますb2n.ir/table-radius
AmerllicA

15

Ianが言ったように、解決策はdiv内にテーブルをネストし、そのように設定することです:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

を使用するoverflow:hiddenと、四角い角がdivから漏れることはありません。


それを使用したい人は誰でもoverflow: hidden、ポップオーバー/ツールチップを使用すると、ラッパーの寸法によってクリップされることに注意してください。
user776686 2017年

7

私の知る限り、これを行うには、すべてのセルを次のように変更するしかありません。

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-childie6では無効ですが、使用しborder-radiusている場合は気にしません。

編集:

サンプルページを確認すると、セルの間隔とパディングでこれを回避できる場合があります。

表示されている濃い灰色の境界線は、実際にはテーブルの背景です(境界線の色を赤に変更すると、これがはっきりとわかります)。Cellspacingをゼロ(または同等:)に設定するとtd, th { margin:0; }、灰色の「境界線」が消えます。

編集2:

1つのテーブルだけでこれを行う方法を見つけることができません。ヘッダー行をネストされたテーブルに変更すると、必要な効果が得られる可能性がありますが、動的ではなく、作業が増えます。


cellspacing = 0の例を追加しましたが、はるかに近いです。望ましくない境界線は消えますが、下隅はまだにじみ出しています。
vamin 2009年

ご協力ありがとうございます。テーブルはphpで生成されているので、提案された有効なソリューションがない場合は、クラスを各コーナーth / tdに割り当てて、個別にスタイルを設定することを考えています。
vamin 2009年

6

Iは、擬似要素を使用して回避策を試み:before:afterthead th:first-childthead th:last-child

テーブルをaでラップすることと組み合わせて <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

見る jsFiddleを

Chromeで動作する(13.0.782.215)これが他のブラウザで動作するかどうかをお知らせください。


5

実際には、tableinside a divをラッパーとして追加できます。次に、これらのCSSコードをラッパーに割り当てます。

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

4

与えられた回答は、テーブルの周りに境界線がない場合にのみ機能します。

SASSにはこれを行うマクロがあり、外部および内部の境界を完全にサポートし、border-collapseと同じスタイルを実現します。実際には指定せずに折りたたみます。

FF / IE8 / Safari / Chromeでテスト済み。

IE8はborder-radius :(をサポートしていないため、IE8(正常に機能低下)を除くすべてのブラウザーで、純粋なCSSで素敵な丸い境界線を提供します。

一部の古いブラウザでは、ベンダープレフィックスを必要とするかもしれないと仕事にborder-radius、とても必要に応じて、あなたのコードにこれらの接頭辞を追加して自由に感じます。

この答えは最短ではありませんが、うまくいきます。

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

このスタイルを適用するには、単に

<table>

次のタグを付けます。

<table class="roundedTable">

上記のCSSスタイルをHTMLに必ず含めてください。

お役に立てれば。


border-radiusのプレフィックスはもう必要ありません。FF3.6(-moz)が必要です。また、-khtmlはもはや必要ありません。
Jonatan Littke 2013年

@JonatanLittke、改善できると思われる場合は、いつでも回答を編集できます。すべてのプレフィックスを削除し、caniuse.comへのリンクを追加して、のプレフィックスについてユーザーが独自に決定できるようにしましたborder-radius
マイケル・マーティン・スマッカー

4

ボーダー付きのスクロール可能なテーブルの場合は、これを使用します(変数の置換、$テキストの開始)

を使用する場合theadtfootまたはth、単に置き換えるtr:first-childtr-last-childし、td彼らと。

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

4

同じ問題がありました。border-collapse完全に削除して使用: cellspacing="0" cellpadding="0" HTMLドキュメントで。例:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

これは機能しますが、効果を得るには、後でfirstchild / lastchildトリックを使用する必要があります。
Thomas Ahle

4

私は完璧に動作するように見えるこのためのクレイジーなCSSのセットを書いたところです:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

3

テーブルの場合はborder-collapse:separate、tbodyおよびtheadの場合はdisplay:inline-tableのソリューション。

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

この回答をコミュニティウィキにする理由はありません。これを行うと、答えから評判を得られなくなります。
tacaswell

3

私はHTMLとCSSを使い始めたばかりで、これに対する解決策も探していました。

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

私はそれを試して、それが何が機能するかを推測します:)


3

同じ問題に遭遇した後にこの答えを見つけましたが、それは非常に単純であることがわかりました:テーブルにオーバーフローを与えるだけです:隠し

ラッピング要素は必要ありません。確かに、質問が最初に尋ねられたとき、これが7年前に機能したかどうかはわかりませんが、現在は機能しています。


これは賢い解決策ですが、実際の境界線も「削除」します。Chromeでは、テーブルの右の境界線と下の境界線が消え、すべての丸い角に境界線がありません。
Alex Jorgenson、2016年

3

角が丸く、セルに境界線がある表。@Ramon Tayagソリューションの使用。

キーはborder-spacing: 0彼が指摘するように使用することです。

SCSSを使用したソリューション。

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

2

私は、「表示」での実験を開始し、私が発見した:border-radiusbordermarginpadding、中tableに表示されます。

display: inline-table;

例えば

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

しかしwidth、すべての列を設定する必要があります

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

2

以下は、http://medialoot.com/preview/css-ui-kit/demo.htmlの角の丸いテーブルを実装する方法の最近の例です。これは、上記のJoel Potterが提案した特別なセレクターに基づいています。ご覧のとおり、IEを少し幸せにする魔法も含まれています。行の色を変更するための追加のスタイルがいくつか含まれています。

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

1

ここに方法があります:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}
<div>
  <table></table>
</div>

または

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }


0

私はいつもSassを使ってこのようにしています

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

あなたはそれを取得していないかもしれないと思います、彼はborder-collapse: collapse有効にしてそれをしようとしています。
giovannipds

@giovannipds自分の返信(承認された回答)を見てください。私の方法は別の方法です。ここで「-1」を削除します。
ディエゴメロ2018年

ああ、ごめんなさい、あなたは間違いなく正しいです、私の間違い、彼の受け入れられた答えはまったく同じことを言っているようです。私は質問のタイトルに書かれていることに固執するつもりでしたが、彼は境界崩壊を望んでいると強調したので、私はそれに直接行きました。可能な場合は-1を削除しますが、できません。そのためには、回答の中で何かを編集する必要があります。これについてはで不可能であることについて言及してみてくださいborder-collapse: collapse。もう一度お許しください。更新を待ちます。
giovannipds

0

これまでのところ最高のソリューションはあなた自身のソリューションから来ており、それはこのようになります:

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>


-1

Border-radiusが正式にサポートされました。したがって、上記のすべての例で、「-moz-」接頭辞を削除できます。

もう1つのトリックは、上下の行にボーダーと同じ色を使用することです。3色すべてが同じで、物理的にはなくても完全に丸みを帯びたテーブルのように混ざり合います。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.