361

編集 - 元のタイトル:border-collapse:collapseで達成する別の方法はありCSSますか?

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

プロパティを使用して角の丸いテーブルを作成しようとして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セル間隔をゼロに設定した後も、下隅はまだ正方形です。

代わりに JavaScript を使用すると、問題が回避されます。

可能な解決策：

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

考えられる解決策 2 は、JavaScript (具体的には jQuery) を使用してコーナーのスタイルを設定することです。このソリューションも機能しますが、まだ探しているものとはまったく異なります (私は好き嫌いがあることを知っています)。2 つの予約があります。

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

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

4

27 に答える 27

278

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

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

    table tr:last-child td:first-child {
        border: 2px solid orange;
        border-bottom-left-radius: 10px;
    }
    
    table tr:last-child td:last-child {
        border: 2px solid green;
        border-bottom-right-radius: 10px;
    }
<table>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        2
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
      <td>
        4
      </td>
    </tr>
  </tbody>
</table>

border-collapse: collapseすべてが適切に丸められるようになりましたが、すべてを壊すという問題がまだ残っています。

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

于 2009-03-11T18:53:29.970 に答える
117

次のメソッドは、「実際の」ボーダー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;
    }
<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Baz</td>
      <td>Qux</td>
    </tr>
    <tr>
      <td>Life is short</td>
      <td rowspan="3">and</td>
    </tr>
    <tr>
      <td>Love</td>
    </tr>
    <tr>
      <td>is always over</td>
    </tr>
    <tr>
      <td>In the</td>
      <td>Morning</td>
    </tr>
  </tbody>
</table>

于 2010-04-06T17:09:18.567 に答える
73

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

  • 表のセルにborder-rightとを設定します (と)border-bottomtdth
  • 最初の行のセルにborder-top
  • 最初の列のセルにborder-left
  • first-childセレクターとセレクターを使用してlast-child、表のセルの四隅にある適切な角を丸めます。

ここでデモをご覧ください。

次の HTML があるとします。

以下の例を参照してください。 

   
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 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;
  border-top: solid 1px #bbb;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th: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>
    <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>

于 2011-01-24T18:56:28.733 に答える
32

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

于 2010-10-18T04:16:58.123 に答える
25

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

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

于 2009-03-09T22:56:40.620 に答える
20

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

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

を使用overflow:hiddenすると、四角い角が div からにじみません。

于 2013-01-06T21:27:15.277 に答える
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ている場合は気にしないと思います。

編集：

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

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

編集2：

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

于 2009-03-09T22:54:11.187 に答える
6

:before疑似要素を使用して回避策を試しまし:afterたthead th:first-childthead 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) で動作します。これが他のブラウザで動作するかどうか教えてください。

于 2011-08-25T01:43:02.107 に答える
6

ここに方法があります：

div {
  border: 2px solid red;
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
  background-color: blue;
  height: 100%;
  width: 100%;
}
<div>
  <table>
    <tr>
      <td><br></td> 
    </tr>
  </table>
</div>

または

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }
于 2020-02-14T10:17:52.493 に答える
5

与えられた答えは、テーブルの周りに境界線がない場合にのみ機能します。これは非常に制限的です!

これを行うための 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 に必ず含めてください。

お役に立てれば。

于 2011-07-15T10:44:33.070 に答える
5

私はこのために完璧に動作するように見えるクレイジーな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;
    }
<table>
  <thead>
    <tr>
      <th>
        Table Head
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Table Data
      </td>
    </tr>
  </tbody>
</table>

/* end complicated rounded table corners !*/
于 2014-03-14T21:43:47.670 に答える
4

縁取りされたスクロール可能なテーブルの場合は、これを使用します (変数を置き換え、$テキストを開始します)

thead、tfootまたはを使用する場合は、とをth置き換えてください。tr:first-childtr-last-childtd

#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>
于 2013-06-08T15:26:01.327 に答える
4

私も同じ問題を抱えていました。border-collapse完全に 削除cellspacing="0" cellpadding="0" して、html ドキュメントで: を使用します。例：

<table class="top_container" align="center" cellspacing="0" cellpadding="0">
于 2010-11-26T23:37:41.983 に答える
3

table には 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;        
}
于 2012-11-28T18:32:53.550 に答える
3

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

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

于 2016-09-27T17:23:10.530 に答える
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
}

私はそれを試してみて、それがうまくいくと思います:)

于 2015-02-08T21:59:09.267 に答える
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;
}
于 2011-09-22T02:07:50.833 に答える
2

「表示」の実験を開始したところ、次のようborder-radiusに表示されることがわかりました。bordermarginpaddingtable

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;
}
于 2012-05-30T22:00:54.107 に答える
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>

于 2019-10-15T01:40:45.790 に答える
-1

Border-radius が正式にサポートされるようになりました。したがって、上記のすべての例で、「-moz-」プレフィックスを削除できます。

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

于 2011-11-17T00:38:21.753 に答える