CSS 自定义 twitter-bootstrap 表。标题向左浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15582563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Customizing twitter-bootstrap table. Header floats left
提问by Hymanie Chan
Currently I am working on table customziation for my project. I am using Twitter Bootstrap rails gem (2.2.6). However I think this should not be an issue when it comes to CSS customization.
目前我正在为我的项目进行表格定制。我正在使用 Twitter Bootstrap rails gem (2.2.6)。但是，我认为这在 CSS 自定义方面应该不是问题。
So basically I want to achieve the following mockup:
所以基本上我想实现以下模型：
However when I put radius border on nothing happens unless I floatit leftor display it in block I don't see rounded borders. Please review the following jsfiddle:
http://jsfiddle.net/zaEFz/2/
但是，当我将半径边框放在任何东西上时，除非我将float它left或在块中显示它，否则我看不到圆形边框。请查看以下 jsfiddle：http:
//jsfiddle.net/zaEFz/2/
But the issue is: when floating the content left, I loose the structure of the table. That means headers don't match content anymore. So few questions:
但问题是：当向左浮动内容时，我会失去表格的结构。这意味着标题不再匹配内容。这么几个问题：
How to align the content with headers? If using float:left
How to round the corners for each row? If not using float:left and display:block
如何将内容与标题对齐？如果使用浮动：左
如何为每一行圆角？如果不使用 float:left 和 display:block
If you answer one of the questions that should be fine :)
如果您回答了应该没问题的问题之一:)
回答by Marcelo De Polli
Sadly, border-radiusdoesn't work on <tr>tags -- only on <th>and <td>tags. But the style you need is very much achievable within those constraints.
可悲的是，border-radius不适用于<tr>标签——仅适用于<th>和<td>标签。但是在这些限制范围内，您需要的样式非常容易实现。
CSS
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;
}
Update:Fixed on Firefox, simplified selectors.
更新：在 Firefox 上修复，简化的选择器。
回答by Peter Herdenborg
To make things line up if you go for the float/block solution, I think you have to specify a fixed width for <td>and <th>:
如果您使用浮动/块解决方案，为了使事情对齐，我认为您必须为<td>and指定固定宽度<th>：
th, td {
width: 40px;
padding-left: 5px;
padding-right: 5px;
}
If you want different side padding for <th>and <td>you'd have to adjust the width accordingly so that the totals match.
如果你想为不同的边填充<th>和<td>你不得不调整相应的宽度，使总数相匹配。
If you leave the table layout alone, the solution seems to be to apply the border-radius to the first and last cell of the thead rather than to the tr. There may be other hacks required too to get things working. Please see How-to create rounded corners on Table Head onlyand How can I have a rounded border on my table and border-collapse: collapse?for reference.
如果单独保留表格布局，解决方案似乎是将边框半径应用于 thead 的第一个和最后一个单元格而不是 tr。可能还需要其他技巧才能使事情正常进行。请参阅如何仅在表头上创建圆角和如何在我的表和边框折叠：折叠上有圆角边框？以供参考。
