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


    body {
      margin: 30px;
    }
    table {
      border-collapse: separate;
      border-spacing: 0;
      min-width: 350px;
    }
    table tr th,
    table tr td {
      border-right: 1px solid #bbb;
      border-bottom: 1px solid #bbb;
      padding: 5px;
    }
    table tr th:first-child,
    table tr td:first-child {
      border-left: 1px solid #bbb;
    }
    table tr th {
      background: #eee;
      border-top: 1px solid #bbb;
      text-align: left;
    }

    /* top-left border-radius */
    table tr:first-child th:first-child {
      border-top-left-radius: 6px;
    }

    /* top-right border-radius */
    table tr:first-child th:last-child {
      border-top-right-radius: 6px;
    }

    /* bottom-left border-radius */
    table tr:last-child td:first-child {
      border-bottom-left-radius: 6px;
    }

    /* bottom-right border-radius */
    table tr:last-child td:last-child {
      border-bottom-right-radius: 6px;
    }

Answer 3

在你的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 */

时事通讯的圆角桌式

3 个答案: