-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