自定义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,简化选择器.