自定义 twitter-bootstrap 表。标题向左浮动

Question

目前我正在为我的项目进行表格定制。我正在使用 Twitter Bootstrap rails gem (2.2.6)。不过，我认为这不应该是 CSS 自定义的问题。

所以基本上我想实现以下模型：

但是，当我将半径边框放在任何东西上时，除非我 float 它 left 或在块中显示它，否则我看不到圆形边框。请查看以下 jsfiddle： http://jsfiddle.net/zaEFz/2/

但问题是：当内容向左浮动时，我会松动表格的结构。这意味着标题不再匹配内容。这么几个问题：

1. 如何将内容与标题对齐？如果使用 float:left

2. 如何为每行圆角？如果不使用 float:left 和 display:block

如果您回答其中一个问题应该没问题:)

Answer 1

如果你选择浮动/块解决方案，为了让事情排成一行，我认为你必须为 <td> 和 <th> 指定一个固定宽度：

th, td {
    width: 40px;
    padding-left: 5px;
    padding-right: 5px;
}

如果您想为 <th> 和 <td> 设置不同的侧边距，您必须相应地调整宽度以使总数匹配。

如果您不考虑表格布局，解决方案似乎是将边框半径应用于 thead 的第一个和最后一个单元格而不是 tr。可能还需要其他技巧才能使事情正常进行。请参阅How-to create rounded corners on Table Head only 和How can I have a rounded border on my table and border-collapse: collapse? 以供参考。

Answer 2

遗憾的是，border-radius 不适用于 <tr> 标签 - 仅适用于 <th> 和 <td> 标签。但是你需要的风格在这些限制下是可以实现的。

CSS

table {
  border-collapse: separate;
  border-spacing: 0 5px;
}

thead th {
  background-color: #006DCC;
  color: white;
}

tbody td {
  background-color: #EEEEEE;
}

tr td:first-child,
tr th:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

jsFiddle

更新：已在 Firefox 上修复，简化了选择器。