我想在整个桌子周围添加一个边框半径.但以下代码在最新版本的Firefox和Google Chrome中都不起作用.

table {
  border-spacing: 0;
  width: 600px;
  margin: 30px;
  border: 1px solid #CCCCCC;
  border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  box-shadow: 0 1px 1px #CCCCCC;
}

table th:first-child {
  border-radius: 6px 0 0 0;
  -moz-border-radius: 6px 0 0 0;
  -webkit-border-radius: 6px 0 0 0;
}

table th:last-child {
  border-radius: 0 6px 0 0;
  -moz-border-radius: 0 6px 0 0;
  -webkit-border-radius: 0 6px 0 0;
}

table td:first-child,
.bordered th:first-child {
  border-left: medium none;
}

table th {
  background-color: #DCE9F9;
  background-image: -moz-linear-gradient(center top, #F8F8F8, #ECECEC);
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
  border-top: medium none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

table td,
table th {
  border-left: 1px solid #CCCCCC;
  border-top: 1px solid #CCCCCC;
  padding: 10px;
  text-align: left;
}
<table class="bordered">
  <thead>
    <tr>
      <th><label>Labels</label></th>
      <th><label>Labels</label></th>
      <th><label>Labels</label></th>
      <th><label>Labels</label></th>
      <th><label>Labels</label></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><label>Value</label></td>
      <td><label>Value</label></td>
      <td><label>Value</label></td>
      <td><label>Value</label></td>
      <td><label>Value</label></td>
    </tr>
  </tbody>
</table>

JSFiddle

推荐答案

它起作用了,这是所用工具的问题:jsFdle的normalized CSS通过隐藏浏览器的默认设置而导致问题.
http://jsfiddle.net/XvdX9/5/

EDIT:
normalize.css stylesheet from jsFiddle adds the instruction border-collapse: collapse to all tables and it renders them completely differently in CSS2.1:

这两个模型的不同之处可以在另一个小提琴上看到:http://jsfiddle.net/XvdX9/11/(单元格上有一些透明的,左上角的单元格上有一个巨大的边界半径,以查看表格与其单元格之间发生了什么.)

在同一个CSS2中.关于HTML表格的1页,还有关于浏览器应该/可以对分隔边框模型中的空单元格做什么的解释,折叠边框模型中border-style: noneborder-style: hidden之间的区别,如何计算宽度,以及如果表格、行和单元格元素在同一边框上定义了3种不同样式,应该显示哪个边框.

Css相关问答推荐

如何使用css创建带有曲线的自定义按钮

添加Angular 17的Stackblitz项目的Angular material 主题?

如何在悬停时缓慢更改渐变 colored颜色 ?

如何将Ant设计日期 Select 器的图标设置在输入 Select 器之前而不是之后

在文本之前添加了额外的空间-Angular 树视图CSS

如何在横向和纵向布局上使用 CSS 网格中的纵横比来保持纵横比

为什么 KaTeX 的彩虹文本只能在 Firefox 上运行?

SASS 中的计算表达式

更改行数时更改 CSS 网格列

Flex & space-around 与内容相交

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

使用 CSS 填充悬停过渡的闪烁文本问题

是否可以对 CSS 网格中重复和可包装的列使用固定的最小和最大宽度?

无法使用 Bootstrap 3 更改占位符 colored颜色

重置子元素的不透明度 - Maple Browser (Samsung TV App)

填充剩余的垂直空间 - 仅 CSS

如何在 CSS 中绘制一个圆形扇区?

跨域 iframe 调整大小

使用没有设置宽度或高度的边界半径的胶囊形状?

React - 防止父子事件触发