1

HTML / CSSメールテンプレートを使用していて、外側のテーブル/コンテナに3pxの境界線半径を追加したいと思います。

こちらがページです。にスタイルとして追加してみましたtable td {}が、うまくいきませんでした。ターゲットにすべき別の要素はありますか？

4

3 に答える 3

2

疑似セレクターを使用するのは比較的簡単です。

table{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
}
/* Top Left */
table tr:first-child td:first-child{
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
/* Top Right */
table tr:first-child td:last-child{
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
/* Bottom Left */
table tr:last-child td:first-child{
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}
/* Bottom Right */
table tr:last-child td:last-child{
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}
于 2012-12-08T02:59:24.157 に答える
1

これは、いくつかの要因に依存します。

  • ブラウザ（FF、Chrome、IEなど）
  • プラットフォーム（PC /デスクトップ/モバイルなど）
  • CSSレベル

<tr>ただし、通常、またはのような個々のテーブル要素のスタイルを設定することはできません<td>。

あなたができることは次のとおりです。

 table {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-collapse: separate;
    overflow: hidden;
 }

テーブルやその他の要素の場合...

テーブルは全体として扱う必要があります。<span>ただし、上記<div>などに適用できます。

IE（これは、標準化されていないために歴史的に多くのCSSの問題を引き起こします）の場合、主要なCSS要素への追加として条件付きCSSを使用できます。

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie-css.css" />
<![endif]-->
于 2012-12-08T03:05:43.533 に答える
0

より少ないコードでそれを行いたい場合は、次のようにテーブル要素に「オーバーフローを非表示にする」を追加できます。

table{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
    overflow: hidden;
}

そうすれば、すべての疑似セレクターは必要ありません

于 2012-12-08T03:13:19.107 に答える