自定义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

可悲的是，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，简化选择器。

Answer 2

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

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

如果您需要<th>和<td>的不同侧边填充，则必须相应地调整宽度，以便总计匹配。

如果单独保留表格布局，解决方案似乎是将border-radius应用于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?以供参考。