4

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

所以基本上我想实现以下模型： 在此处输入图像描述

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

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

  1. 如何将内容与标题对齐？如果使用浮动：左

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

如果您回答应该没问题的问题之一:)

4

2 回答 2

21

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

于 2013-03-23T03:15:07.300 回答
1

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

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

如果您想要不同的侧边距<th>并且<td>您必须相应地调整宽度以使总数匹配。

如果您不理会表格布局，解决方案似乎是将边界半径应用于 thead 的第一个和最后一个单元格而不是 tr。可能还需要其他技巧才能使事情正常进行。请参阅如何仅在表头上创建圆角以及如何在我的桌子上设置圆角边框和边框折叠：折叠？以供参考。

于 2013-03-23T02:15:43.893 回答