web-dev-qa-db-ja.com

丸みを帯びたテーブルコーナーCSSのみ

私は検索し、検索しましたが、私の要件に対する解決策を見つけることができませんでした。

昔ながらのHTMLテーブルがあります。私はそれのために丸いコーナーが欲しい、without画像またはJSを使用して、すなわち純粋なCSSのみ。このような：

Table layout sketch

角のセルの角は丸く、セルの1px太い境界線。

これまでのところ私はこれを持っています：

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

しかし、それによって細胞の境界線がなくなります。境界線を追加しても、丸くなりません！

解決策はありますか？

htmlcsshtml-tablerounded-corners
74
Vishal Shah

FFおよびChrome（他のテストは行っていない）で、別の境界線で正常に動作するようです： http://jsfiddle.net/7veZQ/3/

編集：スケッチの比較的きれいな実装は次のとおりです。

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}
<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

73
RoToRa

私にとって、 Twitter Bootstrap Solution は良さそうです。 IE <9（IE 8以下には丸い角はありません）は除外されますが、それはOKです。将来のWebアプリを開発する場合、私は思う。

CSS/HTML：

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}
<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

あなたはそれで遊ぶことができます ここ（jsFiddleで）

18
Lars Schinkel

まず、すべてのブラウザーをサポートする場合は、-moz-border-radius以外のものが必要になります。次のように、プレーンborder-radiusを含むすべてのバリアントを指定する必要があります。

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

第二に、あなたの質問に直接答えるために、border-radiusは実際には境界線を表示しません。境界線がある場合は、その境界線の外観を設定するだけです。

境界線をオンにして角を丸くするには、borderおよびtd要素のth属性も必要です。

td, th {
   border:solid black 1px;
}

背景色（またはグラフィック）がある場合は、丸い角も表示されますが、もちろん、丸い角を境界なしで表示するには、周囲の要素とは異なる背景色にする必要があります。

古いブラウザの中には、border-radiusをテーブル/テーブルセルに配置することを好まないものがあることに注意してください。各セル内に<div>を入れて、代わりにスタイルを設定する価値があるかもしれません。ただし、これはブラウザの現在のバージョンには影響しません（IEは例外で、角丸はまったくサポートされていません-以下を参照）

最後に、IEはborder-radiusをまったくサポートしていません（IE9ベータ版はサポートしていますが、ほとんどのIEユーザーはIE8以下を使用しています）。 IEをハックしてborder-radiusをサポートするには、 http://css3pie.com/ をご覧ください。

[編集]

さて、これは私を悩ませていたので、いくつかのテストを行いました。

これは私が遊んでいたJSFiddleの例です

あなたが行方不明になっていた重大なことは、テーブル要素のborder-collapse:separate;だったようです。これにより、セルが境界線をリンクしなくなり、境界線の半径を取得できるようになります。

お役に立てば幸いです。

17
Spudley

個人的な経験から、純粋なCSSでHTMLテーブルcellの角を丸くすることは不可能であることがわかりました。テーブルの最も外側の境界線を丸めることができます。

このチュートリアル 、または同様のもので説明されているように画像を使用する必要があります:)

6
Kyle

IE <9の角の丸みやその他のCSS3の動作について見つけた最良の解決策は、ここにあります： http://css3pie.com/

プラグインをダウンロードし、ソリューション構造内のディレクトリにコピーします。次に、スタイルシートで、プラグインをプルするように、動作タグを確認してください。

丸みを帯びた角、色のグラデーション、テーブルのボックスシャドウを提供する私のプロジェクトの簡単な例：

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Visual Studio CSSインテリセンスが不明なプロパティの緑色の下線を提供しても心配する必要はありません。実行しても動作します。一部の要素はあまり明確に文書化されていませんが、特にフロントページでは例がかなり優れています。

6
Patrick Rodriguez

選択した答えはひどいです。これを実装するには、コーナーテーブルのセルをターゲットにして、対応する境界半径を適用します。

上隅を取得するには、th要素のタイプの最初と最後に境界線の半径を設定し、tdの最後と最初に境界線の半径を設定して終了しますタイプtrの最後に入力して、下隅を取得します。

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
3
Luke Flournoy

少し荒いですが、ここではCSSとHTMLのみで構成されるものをまとめます。

  • 角が丸い
  • ヘッダー行
  • 複数のデータ行

この例では、各データセル:hoverに対して<td>疑似クラスも使用します。要素はニーズに合わせて簡単に更新でき、ホバーはすぐに無効にできます。

（ただし、:hoverを取得していないので、行全体<tr>が適切に機能しません。最後のホバーされた行の下部に丸い角が表示されません。見落とされます。）

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}
<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>
1
K. Parker

サンプルHTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

CSSに簡単に変換されるSCSSは、sassmeister.comを使用します

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

0
Leandro Barbosa

テーブル罫線のレッスン...

注：以下のHTML/CSSコードは、IEでのみ表示する必要があります。コードはChromeで正しくレンダリングされません！

次のことを覚えておく必要があります。

  1. テーブルには境界線があります：その外側の境界（境界線半径を持つこともできます）

  2. セル自体にも境界線があります（境界線半径も設定できます）。

  3. テーブルとセルの境界線は互いに干渉する可能性があります。

    セルの境界線は、テーブルの境界線を突き抜けることができます（テーブル境界線など）。

    この効果を確認するには、次のコードのCSSスタイルルールを次のように修正します。
    私。テーブル{border-collapse：Separate;}
    ii。テーブルの角のセルを丸めるスタイルルールを削除します。
    iii。次に、境界の間隔を調整して、干渉を確認します。

  4. ただし、テーブルの境界線とセルの境界線はCOLLAPSEDにすることができます（使用：border-collapse：collapse;）。

  5. 折りたたまれると、セルと表の境界線は異なる方法で干渉します。

    私。テーブルの境界線が丸みを帯びていて、セルの境界線が正方形のままの場合、セルの形状が優先され、テーブルの湾曲した角が失われます。

    ii。逆に、コーナーセルは湾曲しているがテーブルの境界が正方形の場合、コーナーセルの曲率に接するい正方形のコーナーが表示されます。

  6. セルの属性が優先される場合、テーブルの四隅を丸める方法は次のとおりです。

    私。テーブルの境界線を折りたたみます（使用：border-collapse：collapse;）。

    ii。テーブルのコーナーセルに希望する曲率を設定します。
    iii。テーブルの角が丸みを帯びているかどうかは関係ありません（つまり、境界線の半径はゼロになります）。

                      .zui-table-rounded {
                                border: 2px solid blue;
                                /*border-radius: 20px;*/
                                
                                border-collapse: collapse;
                                border-spacing: 0px;
                        }
                                                
                        .zui-table-rounded thead th:first-child {
                                border-radius: 30px 0 0 0;
                        }
                        
                        .zui-table-rounded thead th:last-child {
                                border-radius: 0 10px 0 0;
                        }
                        
                        .zui-table-rounded tbody tr:last-child td:first-child {
                                border-radius: 0 0 0 10px;
                        }
                        
                        .zui-table-rounded tbody tr:last-child td:last-child {
                                border-radius: 0 0 10px 0;
                        }
                        
                        
                        .zui-table-rounded thead th {
                                background-color: #CFAD70;
                        }
                        
                        .zui-table-rounded tbody td {
                                border-top: solid 1px #957030;
                                background-color: #EED592;
                        }
                    <table class="zui-table-rounded">
                        <thead>
                                <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Height</th>
                                        <th>Born</th>
                                        <th>Salary</th>
                                </tr>
                        </thead>
                        <tbody>
                                <tr>
                                        <td>DeMarcus Cousins</td>
                                        <td>C</td>
                                        <td>6'11"</td>
                                        <td>08-13-1990</td>
                                        <td>$4,917,000</td>
                                </tr>
                                <tr>
                                        <td>Isaiah Thomas</td>
                                        <td>PG</td>
                                        <td>5'9"</td>
                                        <td>02-07-1989</td>
                                        <td>$473,604</td>
                                </tr>
                                <tr>
                                        <td>Ben McLemore</td>
                                        <td>SG</td>
                                        <td>6'5"</td>
                                        <td>02-11-1993</td>
                                        <td>$2,895,960</td>
                                </tr>
                                <tr>
                                        <td>Marcus Thornton</td>
                                        <td>SG</td>
                                        <td>6'4"</td>
                                        <td>05-05-1987</td>
                                        <td>$7,000,000</td>
                                </tr>
                                <tr>
                                        <td>Jason Thompson</td>
                                        <td>PF</td>
                                        <td>6'11"</td>
                                        <td>06-21-1986</td>
                                        <td>$3,001,000</td>
                                </tr>
                        </tbody>
                </table>
0
IqbalHamid

以下は私が使用したものであり、ブラウザ間で私のために働いたので、将来誰かに役立つことを願っています：

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

明らかに#contentblock部分は必要に応じて置換/編集でき、Googleまたはお気に入りのWebブラウザーで検索してborder-radius.htcファイルを見つけることができます。

0
Ansipants

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

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>
0
brauliobo

セルに触れずにテーブルの両側の角を丸くしたい場合は、これを試すことができます： http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>
0
Younes Hadry

これはcss3で、最新の非IE <9ブラウザのみがサポートします。

here を確認してください。利用可能なすべてのブラウザーのラウンドプロパティを取得します。

0
BiAiB

<head>タグの間に追加します：

<style>
  td {background: #ffddaa; width: 20%;}
</style>

ボディ内：

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

たとえば、セルの色、内容、および書式設定はもちろんです。
これは、div内の色で塗りつぶされたセルの間隔に関するものです。そうすることで、黒いセルの境界線/テーブルの境界線は実際にはdivの背景色になります。
滑らかな角丸効果を得るには、div-border-radiusを個別のセルコーナー境界線半径よりも約2大きい値に設定する必要があることに注意してください。

0
Paul Schuddebeurs