Rounded corners in a rails application using css [closed]

StackOverflow https://stackoverflow.com/questions/17524387

Domanda

I have used the following css code to apply rounded corner to my table : 

#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;
}

I can get the colors of the parts of the table perfectly but I am not able to get the rounded corner . I have placed the images in /assets folder as well as /assets/images/ folder.

The following is the index.html.erb code.

<!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>
È stato utile?

Soluzione

It's 2013, you can use CSS to achieve these rounded corners in all modern browsers, and degrade gracefully to non-rounded corners for older browsers. Something like the following:

/* 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;
}

You can see an example with some colors here: Example on JSFiddle

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top