1

境界線のあるテーブルがあるニュースレタープログラムがありますが、境界線のエッジを丸くしようとしています。なんらかの理由で「border-radius：20px;」を追加すると 動作しません。

<table style="border-radius: 20px;  order-color: #000000; border-width: 1px; width: 680px;" border="1" cellpadding="5" rules="none" align="center">

別のスタイルシートを持てません。標準の正方形の境界線を示しているだけです。多分私はそれを間違ってやっています、私はhtmlが得意ではありません。

4

3 に答える 3

1

デフォルトでtableは、 に設定されていdisplay: table;ます。それをに変更してdisplay: block;追加border-collapse: seperate;

例：

  <table style="border-radius: 20px;  border-color: #000000; border-width: 1px; width: 680px; display: block; border-collapse: separate;" border="1" cellpadding="5" rules="none" align="center">

jsfiddle: http://jsfiddle.net/57we8/

于 2013-02-15T18:14:30.297 に答える
0

あなたのcssでこれを試してください：

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

次に、PIE.htc ( http://css3pie.com/ ) または IE に類似したものを含めることを検討してください。

*behavior:url(PIE.htc); /* shows in IE7 and below */
_behavior:url(PIE.htc); /* shows in IE6 and below */
于 2013-02-15T18:12:15.637 に答える
0

このcssを試してください

    体 {
      余白: 30px;
    }
    テーブル {
      ボーダー崩壊: 分離;
      ボーダー間隔: 0;
      最小幅: 350px;
    }
    テーブル tr th,
    テーブル tr td {
      border-right: 1px ソリッド #bbb;
      border-bottom: 1px ソリッド #bbb;
      パディング: 5px;
    }
    table tr th:first-child,
    テーブル tr td:最初の子 {
      border-left: 1px ソリッド #bbb;
    }
    テーブル tr th {
      背景: #eee;
      border-top: 1px ソリッド #bbb;
      テキスト整列: 左;
    }

    /* 左上のボーダー半径 */
    table tr:first-child th:first-child {
      ボーダー左上半径: 6px;
    }

    /* 右上のボーダー半径 */
    テーブル tr:最初の子 th:最後の子 {
      ボーダー右上半径: 6px;
    }

    /* 左下のボーダー半径 */
    テーブル tr:最後の子 td:最初の子 {
      ボーダー左下半径: 6px;
    }

    /* 右下のボーダー半径 */
    テーブル tr:最後の子 td:最後の子 {
      ボーダー右下半径: 6px;
    }
于 2013-02-15T18:05:53.957 に答える