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

Question 1

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

私は単純な古いHTMLテーブルを持っています。画像やJSを使用せずに、つまり純粋なCSSのみを使用して、角を丸くしたいのです。このような：

テーブルレイアウトスケッチ

コーナーセルの場合は丸みを帯びたコーナー、セルの場合は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
}

しかし、それは私に細胞の境界線を残しません。境界線を追加しても、丸みはありません。

解決策はありますか？

Question 2

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/

Question 3

私にとって、Twitter BootstrapSolutionは良さそうです。IE <9（IE 8以下では丸い角はありません）は除外されますが、将来の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で）

Question 4

まず、-moz-border-radiusすべてのブラウザをサポートしたい場合だけではありません。border-radius次のように、プレーンを含むすべてのバリアントを指定する必要があります。

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

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

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

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

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

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

最後に、IEがまったくサポートborder-radiusしていないわけではありません（IE9ベータ版はサポートしていますが、ほとんどのIEユーザーはIE8以下を使用します）。ボーダー半径をサポートするためにIEをハックしたい場合は、http：//css3pie.com/を参照してください。

[編集]

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

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

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

お役に立てば幸いです。

Question 5

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

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

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

Question 6

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インテリセンスが未知のプロパティに緑色の下線を表示しても心配しないでください。実行しても、機能します。一部の要素はあまり明確に文書化されていませんが、例は特にフロントページでかなり優れています。

Question 7

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

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

Question 8

少しラフですが、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>

スニペットを展開

Question 9

<div>テーブルの周りにラッパーを追加し、次のCSSを適用します

border-radius: x px;
overflow: hidden;
display: inline-block;

このラッパーに。

Question 10

@lukeflournoyの素晴らしい答えを適応させるために-そしてあなたがthあなたのテーブルで使用していないなら、ここにあなたが丸いテーブルを作るために必要なすべてのCSSがあります：

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Question 11

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

あなたが使用している場合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>

Question 12

セルに触れずにテーブルの両側の角を丸くしたい場合は、これを試すことができます：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>

Question 13

サンプル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/

Question 14

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

#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部分は必要に応じて置き換え/編集することができ、border-radius.htcGoogleまたはお気に入りのWebブラウザで検索することでファイルを見つけることができます。

Question 15

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

ここをチェックしてください、それは利用可能なすべてのブラウザのroundプロパティを導き出します

Question 16

<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の背景色になります。
滑らかな丸みを帯びたコーナー効果を得るには、個別のセルのコーナー境界半径よりも約2大きい値をdiv-border-radiusに設定する必要があることに注意してください。

Question 17

テーブルボーダーのレッスン...

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

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

テーブルには境界線があります：その外側の境界線（境界線半径を持つこともできます）。
セル自体にも境界線があります（境界線半径を持つこともできます）。
テーブルとセルの境界は互いに干渉する可能性があります。

セルの境界線は、テーブルの境界線（つまり、テーブルの境界線）を貫通できます。

この効果を確認するには、以下のコードのCSSスタイルルールを次のように修正します
。テーブル{border-collapse：separate;}
ii。テーブルの角のセルを丸めるスタイルルールを削除します。
iii。次に、境界間隔で遊んで、干渉を確認します。
ただし、テーブルの境界線とセルの境界線は折りたたむことができます（border-collapse：collapse;を使用）。
それらが折りたたまれている場合、セルとテーブルの境界は異なる方法で干渉します。

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

ii。逆に、コーナーセルが湾曲しているが、テーブルの境界が正方形の場合、コーナーセルの曲率に隣接する醜い正方形のコーナーが表示されます。
セルの属性が優先される場合、テーブルの四隅を丸める方法は次のとおりです。

私。テーブルの境界線を折りたたむ（使用：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>

スニペットを展開

Question 18

CSS：

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}