14


1

角の丸いテーブルラインを作成できますか?

HTMLとCSSを使用して履歴書のスタイルを設定していますが、スタイルを設定するのが困難です

素子。

これはテーブル内では機能しませんか?

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

5 Answer


23


はい、テーブル内で「td」要素と「th」要素で機能しますが、「tr」では機能しません。 テーブル全体で角を丸くするために「テーブル」で使用することもできます。

左端と右端の要素が丸められるようにセルの行を丸める場合、 :first-child`と:last-child`擬似クラスを使用する必要があります。

tr td:first-child {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;

}

tr td:last-child {
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

「first-child」はIE6でサポートされておらず、IE7でサポートが追加されていますが、「last-child」はまだありません。 しかし、これらのブラウザでは「境界線半径」が機能しないため、それは問題ではありません。


3


テーブル罫線のレッスン…​

NOTE The HTML/CSS code below should be viewed in IE only. The code will Chromeで正しくレンダリングされません!

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

  1. テーブルには境界線があります:その外側の境界( 境界半径)

  2. セル自体にも境界線があります(境界線もあります) 境界半径)

  3. テーブルとセルの境界線は互いに干渉する可能性があります。 +セルの境界線は、テーブルの境界線を貫通できます(テーブル境界線など)。 +この効果を確認するには、以下のコードのCSSスタイルルールを次のように修正します。 テーブル\ {border-collapse:Separate;} + ii。 テーブルの角のセルを丸めるスタイルルールを削除します。 + iii. 次に、境界の間隔を調整して、干渉を確認します。

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

  5. 折りたたまれると、セルとテーブルの境界線が干渉します 別の方法:+ i。 テーブルの境界線が丸みを帯びていて、セルの境界線が正方形のままの場合、セルの形状が優先され、テーブルの湾曲した角が失われます。 {空} ii。 逆に、コーナーセルの曲線はあるがテーブルの境界が正方形の場合、コーナーセルの曲率に接するい正方形のコーナーが表示されます。

  6. セルの属性が優先されることを考えると、 テーブルの四隅は、次のとおりです:+ i。 テーブルの境界線を折りたたみます(使用: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;
            }
                    Name

ポジション

高さ

Born

給料

デマーカスカズンズ

C

6'11 "

1990年8月13日

4,917,000ドル

イザヤ・トーマス

PG

5'9"

1989年2月7日

473,604ドル

ベン・マクレモア

SG

6'5"

1993年2月11日

2,895,960ドル

マーカス・ソーントン

SG

6'4"

05-05-1987

7,000,000ドル

ジェイソン・トンプソン

PF

6'11 "

1986年6月21日

3,001,000ドル


0


私はそれをテーブルなしで、divを使用して、

display: table-cell;
vertical-align: middle;


0


tr td {
    border: 1px solid #dedede;
    border-radius:3px;
}


-3


    .test
    {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: #a9a9a9 1px solid; .
        width: 200px;
        height: 50px;
    }




           this is a test

これはChromeとFFで機能します。