html - 表の角丸CSSを解く

Question

角を丸くするためのこのCSSルールがあります：

th, td { padding: 8px;
         background: #E8ECE0;
         text-align: center;
         border: 1px solid #444;
         border-bottom-width: 0px;
}
thead { background-color: #446bb3  ; color :#fff; padding:4px; line-height:30px }
tbody tr:nth-child(even) {background: #F6F6EC;}
tbody tr:nth-child(odd) {background: #FFF}

tr:first-child td, tr:first-child th {
    border-top-left-radius: 12px; border-top-right-radius: 12px;
}
tr:last-child td {
    border-bottom: 1px solid #444;
    border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
}
table { border-spacing: 0; border: 0; margin:0px; width:100%; padding:5px}
td.pd {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
td.pu {border-top-left-radius: 12px; border-top-right-radius: 12px;}

私のhtmlテーブルは次のとおりです。

<table >
    <tbody>
      <tr >
        <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
         <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
         <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
      <td >Hello</td><td >Hello</td>
      </tr>
    </tbody>
  </table>

これは私にこれを与えます

テーブル内およびテーブルの中央にある td 要素も角が丸くなっているため、この問題を解決するにはどうすればよいですか? 角を丸くするには、最初の行と最後の行だけが必要です。

Answer 1

テーブルをdivに入れるだけです。div のスタイル (例):

div {
  border-radius: 4px;
  -moz-border-radius: 4px
  -webkit-border-radius: 4px;
  overflow: hidden; /*notice*/
}

これでテーブルの角が隠れます。

Answer 2

この回答はあなたの質問に直接答えるものではありませんが、変形です。中央の列の角を丸くしたくない場合は、これが可能な解決策です。

図：

テーブル行 (tr) のプロパティ: 一番左の列のテーブル データ (td) を更新します。

tbody tr td:first-child
{
    border-radius: 0.6em 0 0 0.6em;
}

テーブル行 (tr) のプロパティ: 2 番目の列のテーブル データ (td) を更新します。

tbody td:nth-child(2)
{
    border-radius: 0 0.6em 0.6em 0;
}

以下に例を示します: JS Fiddle デモ

複数の列 (td または th) がある場合は、次のようなものを追加するだけです。

tbody td:nth-child(2) /* This is now the middle element out of three */
{
    border-radius: 0 0 0 0;
}
tbody td:nth-child(3) /* This is now the right most column */
{
    boder-radius: 0 0.6em 0.6em 0;
}

Answer 3

これは古い回答ですが、調査結果を追加して強化したいと思います。David Thomasの超スマートな答えに加えて、それが正確に収まらないエッジケースを見つけました: 単一セル行! 例えば：

<table>
   <tr><th colspan="3">My header</th></tr>
   <tr><td>row1-cell1</td><td>row1-cell2</td><td>row1-cell3</td></tr>
   <tr><td>row2-cell1</td><td>row2-cell2</td><td>row2-cell3</td></tr>
   <tr><th colspan="3">My footer</th></tr>
</table>

右上隅のルールは左上隅のルールを上書きし (後で来るため)、右下隅のルールは左下隅のルールを上書きします (同じ理由で)。 . 以下のスクリーンショットを参照してください。

そのための救済策は以下のcssです（必要に応じてさまざまなtable-tr、tbody-tr、thead-trの組み合わせのセレクターを追加したので、マークアップに合わせて拡張することもできます）：

        table td,
        table th{
            border: 1px solid #666;
        }

        table{
            width: 98%;
            border-spacing: 0px;
        }

         /* alternating table row colors*/
        tr:nth-child(even)  { background-color:#f6f6f6; }
        tr:nth-child(odd)   { background-color:#ffffff; }

        /* set all corner radii initially to zero */
        th, td {
            border-radius: 0;
        }
        
        /*set only specific radii per corner (don't use the border-radius shorthand)*/
        thead tr:first-child th:first-child, 
        table tr:first-child td:first-child,
        tbody tr:first-child th:first-child {
            border-top-left-radius: 0.6em;
        }
        thead tr:first-child th:last-child, 
        table tr:first-child td:last-child,
        tbody tr:first-child th:last-child {
            border-top-right-radius: 0.6em;
        }
        tbody tr:last-child td:first-child, 
        table tr:last-child td:first-child,
        tbody tr:last-child th:first-child {
            border-bottom-left-radius: 0.6em;
        }
        tbody tr:last-child td:last-child, 
        table tr:last-child td:last-child,
        tbody tr:last-child th:last-child {
            border-bottom-right-radius: 0.6em;
        }

        thead + tbody tr td,
        tr + tr td ,
        tr + tr th {
            border-top: 0;
        }

        tr th + th,
        tr td + td {
            border-left: 0;
        }

        /* shade th cells */
        table th {
            background-color: #888;
            color: #FFF;
        }

これにより、必要に応じて以下のスクリーンショットが得られます。

このソリューションのすべての功績は、特に隣接するセルの境界線のトリックについて、David Thomasに引き続き委ねられています。