表的边框半径未按预期运行 [英] Table's border-radius does not function as expected

问题描述

我希望在整个表格周围添加边框半径。但以下代码无法在最新版本的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

推荐答案

它可以工作，这是所用工具的问题：jsF标准化的css通过隐藏浏览器的默认设置而导致问题.
请参见http://jsfiddle.net/XvdX9/5/

编辑：
normalize.cssjsFdle中的样式表将指令border-collapse: collapse添加到所有表，它在CSS2.1中以完全不同的方式呈现它们：

• The separated borders model
• The collapsing border model

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

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

这篇关于表的边框半径未按预期运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！