html - 时事通讯的圆角表样式

Question

我有一个新闻信函程序，它有一个带边框的表格，但我正在尝试使边框具有圆形边缘。出于某种原因，当我添加“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。

Answer 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/

Answer 2

试试这个 CSS

    身体 {
      边距：30px；
    }
    桌子 {
      边框折叠：分开；
      边框间距：0；
      最小宽度：350px；
    }
    表 tr th，
    表 tr td {
      右边框：1px 实心#bbb；
      边框底部：1px 实心#bbb；
      填充：5px；
    }
    表 tr th:first-child,
    表 tr td:first-child {
      左边框：1px 实心#bbb；
    }
    表 tr th {
      背景：#eee;
      边框顶部：1px 实心#bbb；
      文本对齐：左；
    }

    /* 左上边框半径 */
    表 tr:first-child th:first-child {
      边框左上角半径：6px；
    }

    /* 右上角边框半径 */
    表 tr:first-child th:last-child {
      边框右上角半径：6px；
    }

    /* 左下边框半径 */
    表 tr:last-child td:first-child {
      边框左下角半径：6px；
    }

    /* 右下边框半径 */
    表 tr:last-child td:last-child {
      边框右下角半径：6px；
    }

Answer 3

在你的 CSS 中试试这个：

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

然后考虑在 IE 中包含 PIE.htc ( http://css3pie.com/ ) 或类似的东西：

*behavior:url(PIE.htc); /* shows in IE7 and below */
_behavior:url(PIE.htc); /* shows in IE6 and below */