圆形表角只有CSS

Question

我进行了搜索和搜索,但未能找到符合我要求的解决方案.

我有一个简单的HTML表格.我想要它的圆角,不使用图像或JS,即纯CSS.像这样:

角部细胞的圆角和细胞的1px粗边.

到目前为止我有这个:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

但这让我对细胞没有任何边界.如果我添加边框,它们不会圆润!

有解决方案吗

Answer 1

似乎在FF和Chrome(没有测试任何其他)与单独的边框工作正常:http://jsfiddle.net/7veZQ/3/

编辑:这是一个相对干净的草图实现:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

Answer 2

对我来说,Twitter Bootstrap解决方案看起来不错.它排除了IE <9(在IE 8及更低版本中没有圆角),但我认为,如果您开发了预期的Web应用程序,那就没问题了.

CSS/HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

你可以在这里玩(在jsFiddle上)

Answer 3

首先,您需要的不仅仅是-moz-border-radius支持所有浏览器.您应该指定所有变体,包括plain border-radius,如下所示:

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

其次,要直接回答你的问题,border-radius实际上并没有显示边框; 它只是设置边角的外观,如果有的话.

要打开边框,从而获得圆角,还需要border您td和th元素的属性.

td, th {
   border:solid black 1px;
}

如果你有背景颜色(或图形),你也会看到圆角,当然它需要与周围元素的背景颜色不同,以便圆角在没有边框的情况下可见.

值得注意的是,一些旧的浏览器不喜欢放置border-radius表/表格单元格.<div>相反,可能值得在每个单元格内部设置一个样式.但是这不应该影响任何浏览器的当前版本(IE除外,它根本不支持圆角 - 见下文)

最后,并不是IE根本不支持border-radius(IE9测试版确实如此,但大多数IE用户将使用IE8或更低版本).如果你想破解IE以支持border-radius,请查看http://css3pie.com/

[编辑]

好吧,这让我烦恼,所以我做了一些测试.

这是我一直在玩的JSFiddle示例

看起来你缺少的关键是border-collapse:separate;在table元素上.这会阻止单元格将边框链接在一起,从而允许它们拾取边框半径.

希望有所帮助.

Answer 4

通过个人的体验,我发现用纯CSS 来围绕HTML表格单元的角落是不可能的.可以将桌子的最外边界四舍五入.

您将不得不求助于使用本教程中描述的图像,或任何类似的:)

Answer 5

我发现IE <9的圆角和其他CSS3行为的最佳解决方案可以在这里找到:http://css3pie.com/

下载插件,复制到解决方案结构中的目录.然后在样式表中确保使用行为标记,以便它插入插件.

我的项目中的简单示例,它为我的表提供圆角,颜色渐变和框阴影:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

如果您的Visual Studio CSS intellisense为您提供了未知属性的绿色下划线,请不要担心,它在运行时仍然有效.有些元素的文档记录不是很清楚,但是这些例子非常好,特别是在头版上.

Answer 6

这有点粗糙，但这里有一些我放在一起的东西，它完全由 CSS 和 HTML 组成。

• 外圆角
• 标题行
• 多个数据行

此示例还:hover为每个数据单元使用了伪类<td>。元素可以轻松更新以满足您的需求，并且可以快速禁用悬停。

（但是，我还没有:hover让整行正常工作<tr>。最后一个悬停的行在底部没有显示圆角。我敢肯定有一些简单的东西被忽视了。）

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}

<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

Answer 7

所选答案很糟糕。我可以通过定位角表单元格并应用相应的边框半径来实现此目的。

要获得顶部边角，设置在第一和最后一个类型的圆角半径个元素，然后通过设置在最后边界半径完成，第一的TD类型上的最后一个类型的TR获得底角。

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}