-2

我使用以下 css 代码将圆角应用于我的表格：

#rounded-corner
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: left;
    border-collapse: collapse;
}
#rounded-corner thead th.rounded-company
{
        background: #b9c9fe url(/assets/left.png) right -1px no-repeat;
    width:100%; 
        height:auto; 
}
#rounded-corner thead th.rounded-q4
{
    background: #b9c9fe url(/assets/right.png) right -1px no-repeat;
}
#rounded-corner th
{
    padding: 8px;
    font-weight: normal;
    font-size: 13px;
    color: #039;
    background: #b9c9fe;
}
#rounded-corner td
{
    padding: 8px;
    background: #e8edff;
    border-top: 1px solid #fff;
    color: #669;
}
#rounded-corner tfoot td.rounded-foot-left
{
    background: #e8edff url(/assets/botleft.png) left bottom no-repeat;
}
#rounded-corner tfoot td.rounded-foot-right
{
    background: #e8edff url(/assets/botright.png) right bottom no-repeat;
}
#rounded-corner tbody tr:hover td
{
    background: #d0dafd;
}

我可以完美地获得桌子各部分的颜色，但我无法获得圆角。我已将图像放在 /assets 文件夹以及 /assets/images/ 文件夹中。

以下是 index.html.erb 代码。

<!DOCTYPE html>
<html>
    <head>
        <title>List of Posts</title>
        <meta charset="UTF-8">
        <%= stylesheet_link_tag "posts.css.scss" %>
        <h1 id = header align=center>Listing Posts</h1>
        </head>
         <div align=center><%= link_to 'New Post', new_post_path %></div>
          <div align=center>
    <table id="rounded-corner">
    <tr>
        <th>Title</th>
        <th>Text</th>
        <th colspan="3"></th>
    </tr>
  <% @post.each do |post| %>
    <tr>
      <td><%= post.title %></td>
      <td><%= post.text %></td>
      <td><%= link_to 'Show', post_path(post),:class =>'links' %></td>
      <td><%= link_to 'Edit', edit_post_path(post),:class =>'links' %></td>
      <td><%= link_to 'Destroy', post_path(post), method: :delete, data: { confirm: 'Are you sure ?' },:class =>'links' %></td>
    </tr>
  <% end %>
</table>
</div>
</html>
4

1 回答 1

1

现在是 2013 年，您可以使用 CSS 在所有现代浏览器中实现这些圆角，并优雅地降级为旧浏览器的非圆角。类似于以下内容：

/* rounded corners for the TH cells */
th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

th:only-child {
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

/* rounded corners for the TD cells inside TFOOT */
tfoot td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
tfoot td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}
tfoot td:only-child {
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

您可以在此处查看带有一些颜色的示例：JSFiddle 上的示例

于 2013-07-08T10:39:52.383 回答