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

StackOverflow https://stackoverflow.com/questions/628301

質問

編集-元のタイトル： border-collapse:collapseでCSSを実現する別の方法はありますか（折りたたまれた丸いコーナーテーブルを使用するため）？

テーブルの境界線を折りたたむだけでは根本的な問題は解決されないことがわかっているため、タイトルを更新して議論をより適切に反映させました。

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

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

ここに問題があります。 tdプロパティも設定したいのですが、設定すると<=>が機能しなくなります。実際に使用せずに<=>と同じ効果を得ることができるCSSベースの方法はありますか？

編集：

こちら（Firefox / Safariのみ）の問題を示すために簡単なページを作成しました。

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

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

テーブルの四隅の角が<！> quot; bleed .. !! quot;

であるため、テーブルを角の丸い別の要素で囲むことはできません。

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

cellpacingをゼロに設定した後でも、下<=>角はまだ正方形です。

代わりにJavaScriptを使用すると、問題を回避して機能します。

可能な解決策：

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

可能な解決策2は、JavaScript（特にjQuery）を使用してコーナーのスタイルを設定することです。この解決策も機能しますが、それでも私が探しているものとはまったく異なります（私は好き嫌いがあります）。 2つの予約があります：

  1. これは非常に軽量なサイトです。JavaScriptを最小限に抑えたいと思います
  2. border-radiusを使用することの魅力の一部は、優雅な劣化と漸進的な強化です。すべての角の丸い部分に境界線の半径を使用することで、CSS3対応ブラウザでは常に丸みを帯びたサイトになり、他のブラウザでは一貫して四角いサイトになります（IEをご覧になります）。

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

役に立ちましたか？

解決

わかりました。特別なセレクターを使用する必要があります。

テーブルの角を丸くすることの問題は、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がすべてを壊すという問題が残っています。回避策は、代わりにHTMLでcellspacing="0"を設定することです（ありがとう、 Joel ）。

他のヒント

<！> quot; real <！> quotの代わりにbox-shadowを1pxの広がりで使用することにより、次の方法が機能します（Chromeでテスト済み）。ボーダー。

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;
}

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

  • テーブルセル（border-rightおよびborder-bottom）にtdおよびthを設定します
  • 最初の行のセルをborder-top
  • 最初の列のセルをborder-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>

table{border-spacing: 0}ではなくtable{border-collapse: collapse}を使用してみましたか????

おそらく、テーブルとスタイルの周りに、丸い境界線を持つ別の要素を配置する必要があります。

ワーキングドラフトは、border-radiusが次の場合にテーブル要素に適用されないことを指定します。 border-collapseの値はcollapseです。

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

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

overflow:hiddenを使用すると、正方形の角はdivからはみ出しません。

私の知る限り、あなたができる唯一の方法は、次のようにすべてのセルを変更することです：

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;
}
IE6では

:last-childは無効ですが、border-radiusを使用している場合は気にしないと思います。

編集：

サンプルページを見ると、セルの間隔とパディングを使用してこれを回避できる可能性があるようです。

表示されている灰色の太い境界線は、実際にはテーブルの背景です（境界線の色を赤に変更すると、これがはっきりとわかります）。 cellspacingをゼロ（または同等：td, th { margin:0; }）に設定すると、灰色の<！> quot; borders <！> quot;消えます。

編集2：

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

:beforeおよび:after

で擬似要素thead th:first-childおよびthead th:last-childを使用して回避策を試みました

<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）これが他のブラウザでも動作するかどうかを教えてください。

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

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

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

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

table {
  border-collapse: collapse;
}

指定された回答は、テーブルの周囲に境界線がない場合にのみ機能します。これは非常に制限されています！

SASSにこれを行うマクロがあります。これは、外部および内部境界を完全にサポートし、実際に指定せずにborder-collapse：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に含めるようにしてください。

これがお役に立てば幸いです。

境界線付きのスクロール可能なテーブルの場合、これを使用します（変数を置き換え、$開始テキスト）

thead、tfoot、またはthを使用する場合は、tr:first-childおよびtr-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>

このために完璧な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 !*/

border-collapse：separate for tableおよびdisplay：inline-table for tbodyとtheadのソリューション。

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;        
}

私は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
}

試してみて、動作を推測してください：）

同じ問題に遭遇した後、この答えを見つけましたが、それは非常に簡単であることがわかりました。テーブルoverflow：hiddenを与えるだけです

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

角が丸く、セルが縁取りされたテーブル。 @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;
  }
}

<！> quot; display <！> quot;で実験を開始しました。そして、私はそれを見つけました：border-radius、border、margin、padding、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;
}

の角丸のテーブルを実装する方法の最近の例です。 http://medialoot.com/preview/css-ui-kit/demo.html 。上記のジョエル・ポッターが提案した特別なセレクターに基づいています。ご覧のとおり、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;
}

私はいつも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-radiusが正式にサポートされるようになりました。したがって、上記のすべての例では、<！> quot; -moz-<！> quot;をドロップできます。プレフィックス。

もう1つのトリックは、上と下の行に境界線と同じ色を使用することです。 3色すべてが同じであるため、物理的には関係なく、完全に丸みを帯びたテーブルのように見えます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top