Html 圆桌角仅 CSS

Rounded table corners CSS only

提问by Vishal Shah

I have searched and searched, but haven't been able to find a solution for my requirement.

我已经搜索和搜索，但一直无法找到满足我要求的解决方案。

I have a plain ol' HTML table. I want round corners for it, withoutusing images or JS, i.e. pure CSS only. Like this:

我有一个普通的 HTML 表。我想要圆角，不使用图像或 JS，即纯CSS。像这样：

Rounded corners for corner cells, and 1pxthick border for the cells.

角单元的圆角和单元的1px粗边框。

So far I have this:

到目前为止，我有这个：

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
}

But that leaves me without any borders for the cells. If I add borders, they aren't rounded!

但这让我对细胞没有任何界限。如果我添加边框，它们不会被舍入！

Any solutions?

任何解决方案？

采纳答案by RoToRa

Seems to work fine in FF and Chrome (haven't tested any others) with separate borders: http://jsfiddle.net/7veZQ/3/

在带有单独边框的 FF 和 Chrome（尚未测试任何其他）中似乎工作正常：http: //jsfiddle.net/7veZQ/3/

Edit: Here's a relatively clean implementation of your sketch:

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

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/

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

回答by Lars Schinkel

For me, the Twitter Bootstrap Solutionlooks good. It excludes IE < 9 (no round corners in IE 8 and lower), but that's O.K. I think, if you develop prospective Web-Apps.

对我来说，Twitter Bootstrap 解决方案看起来不错。它不包括 IE < 9（在 IE 8 及更低版本中没有圆角），但我认为没关系，如果你开发未来的 Web 应用程序。

CSS/HTML:

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>

You can play with that here (on jsFiddle)

你可以在这里玩（在 jsFiddle 上）

回答by Spudley

Firstly, you'll need more than just -moz-border-radiusif you want to support all browsers. You should specify all variants, including plain border-radius, as follows:

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

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

Secondly, to directly answer your question, border-radiusdoesn't actually display a border; it just sets how the corners look of the border, if there is one.

其次，直接回答你的问题，border-radius实际上并不显示边框；它只是设置边角的外观（如果有的话）。

To turn on the border, and thus get your rounded corners, you also need the borderattribute on your tdand thelements.

要打开边框，从而获得圆角，您还需要和元素border上的属性。tdth

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

You will also see the rounded corners if you have a background colour (or graphic), although of course it would need to be a different background colour to the surrounding element in order for the rounded corners to be visible without a border.

如果您有背景颜色（或图形），您还将看到圆角，当然，它需要与周围元素的背景颜色不同，以便圆角在没有边框的情况下可见。

It's worth noting that some older browsers don't like putting border-radiuson tables/table cells. It may be worth putting a <div>inside each cell and styling that instead. However this shouldn't affect current versions of any browsers (except IE, that doesn't support rounded corners at all - see below)

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

Finally, not that IE doesn't support border-radiusat all (IE9 beta does, but most IE users will be on IE8 or less). If you want to hack IE to support border-radius, look at http://css3pie.com/

最后，并不是说 IE 根本不支持border-radius（IE9 beta支持，但大多数 IE 用户将使用 IE8 或更低版本）。如果你想破解IE支持border-radius，看http://css3pie.com/

[EDIT]

[编辑]

Okay, this was bugging me, so I've done some testing.

好吧，这让我很烦恼，所以我做了一些测试。

Here's a JSFiddle example I've been playing with

这是我一直在玩的一个 JSFiddle 示例

It seems like the critical thing you were missing was border-collapse:separate;on the table element. This stops the cells from linking their borders together, which allows them to pick up the border radius.

似乎您缺少的关键border-collapse:separate;在于表格元素。这会阻止单元格将它们的边界链接在一起，从而允许它们选择边界半径。

Hope that helps.

希望有帮助。

回答by Patrick Rodriguez

The best solution I've found for rounded corners and other CSS3 behavior for IE<9 can be found here: http://css3pie.com/

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

Download the plug-in, copy to a directory in your solution structure. Then in your stylesheet make sure to have the behavior tag so that it pulls in the plug-in.

下载插件，复制到解决方案结构中的目录。然后在你的样式表中确保有行为标签，以便它拉入插件。

Simple example from my project which gives me rounded corners, color gradient, and box shadow for my table:

来自我的项目的简单示例，它为我的表格提供了圆角、颜色渐变和框阴影：

.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;
}

Don't worry if your Visual Studio CSS intellisense gives you the green underline for unknown properites, it still works when you run it. Some of the elements are not very clearly documented, but the examples are pretty good, especially on the front page.

如果您的 Visual Studio CSS 智能感知为您提供了未知属性的绿色下划线，请不要担心，它在您运行时仍然有效。有些元素没有很清楚地记录在案，但示例非常好，尤其是在首页上。

回答by Luke Flournoy

The selected answer is terrible. I would implement this by targeting the corner table cells and applying the corresponding border radius.

选择的答案很糟糕。我将通过定位角表单元格并应用相应的边界半径来实现这一点。

To get the top corners, set the border radius on the first and last of type of the thelements, then finish by setting the border radius on the last and first of tdtype on the last of type trto get the bottom corners.

要获得顶部边角，设置在第一和最后一个类型的圆角半径个元素，然后通过设置在最后边界半径完成，第一的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;
}

回答by Kyle

Through personal expeirence I've found that it's not possible to round corners of an HTML table cellwith pure CSS. Rounding a table's outermost border is possible.

通过个人经验，我发现不可能使用纯 CSS对 HTML 表格单元格的角进行圆角处理。可以将表格的最外边界四舍五入。

You will have to resort to using images as described in this tutorial, or any similar :)

您将不得不使用本教程中所述的图像或任何类似的方法:)

回答by K. Parker

It is a little rough, but here is something I put together that is comprised entirely of CSS and HTML.

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

• Outer corners rounded
• Header row
• Multiple data rows

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

This example also makes use of the :hoverpseudo class for each data cell <td>. Elements can be easily updated to meet your needs, and the hover can quickly be disabled.

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

(However, I have not yet gotten the :hoverto properly work for full rows <tr>. The last hovered row does not display with rounded corners on the bottom. I'm sure there is something simple that is getting overlooked.)

（但是，我还没有: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>

回答by Ubby

Add a <div>wrapper around the table, and apply the following CSS

<div>在表格周围添加一个包装器，并应用以下 CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

to this wrapper.

到这个包装。

回答by Paul Schuddebeurs

Add between <head>tags:

在<head>标签之间添加：

<style>
  td {background: #ffddaa; width: 20%;}
</style>

and in the body:

在体内：

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

The cell color, contents and formatting are of course for example;
it's about spacing color-filled cells within a div. Doing so, the black cell borders/table border are actually the div background color.
Note that you'll need to set the div-border-radius about 2 values greater than the separate cell corner border radii, to take a smooth rounded corner effect.

单元格颜色，内容和格式当然是例如;
它是关于在 div 中间隔颜色填充的单元格。这样做，黑色单元格边框/表格边框实际上是 div 背景色。
请注意，您需要将 div-border-radius 设置为比单独的单元格角边框半径大 2 个左右的值，以获得平滑的圆角效果。

回答by Younes Hadry

You can try this if you want the rounded corners on each side of the table without touching the cells : http://jsfiddle.net/7veZQ/3983/

如果您希望在不接触单元格的情况下在桌子的每一侧使用圆角，您可以尝试此操作：http: //jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>