1

I have a small issue with some design. Problem is that the background colour of a row at the top or the bottom of the table seems to be "hanging over" the edges. I think that the background colour is still applying the table style, but cannot figure this out for the life of me (I'm not a designer!). Jfiddle here:

http://jsfiddle.net/UFcqB/

HTML:

<div class="stats_table">
        <table cellspacing="0">
            <tr class="tablehead">
                <th>ID</th>
                <th>Name</th>
                <th>Contact Person</th> 
                <th>Contact Number</th>
                <th>Email Address</th>
                <th>Status</th>
                <th>Location</th>
                <th class="modify">Options</th>
            </tr>
            <tr class="second_row">
                <td>1</td>
                <td>Test Agency cc.</td><td>John Doe</td>
                <td>0112131232</td>
                <td><a target="_blank" href="mailto:jd@testagency.co.za">jd@testagency.co.za</a>    </td>
                <td>Active</td>
                <td>Hatfield</td>
                <td class="modify">
                    <a onclick="return false;" href="#"><img title="View Agency Details" src="img/icons/list_small.png"></a>
                    <a onclick="return false;" href="#"><img title="Disable Agency" src="img/icons/delete_small.png"></a>
                </td>

            </tr>
        </table>
</div>

CSS:

table {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E2E2E2;
    border-collapse: separate;
    border-radius: 20px 20px 20px 20px;
    moz-border-radius: 20px 20px 20px 20px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    line-height: 1;
    font-size: 12px;
    width: 100%;
}

th {
    padding: 5px 10px 5px 10px;
}

td {
    padding: 5px 10px 5px 10px;
    text-align: left;
}

.tablehead {
    background-color: #E9E9EA;
    color: #747070;
    text-align: left;
}

.second_row {
    background-color: #DFEFFC;
}

Thanks for any help!

iLikeBreakfast
  • 1,545
  • 23
  • 46
  • Read this and weep: http://stackoverflow.com/questions/4401442/border-radius-background-bleed – Gimmy Jun 28 '13 at 18:53
  • this is known issue for table. you may wish to check this: http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i – enam Jun 28 '13 at 19:07

3 Answers3

8

If you add:

 overflow: hidden;

to the CSS of table, it will hide the corners of the rows.

knolleary
  • 9,777
  • 2
  • 28
  • 35
1

Check here: http://jsfiddle.net/balintbako/UAVxB/

You have to add the border-radius to the <th>s and <td>s on the corner.

There is a quite long conversation here (I copied the css from here to the fiddle): CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

Community
  • 1
  • 1
Balint Bako
  • 2,500
  • 1
  • 14
  • 13
0

It's because the table top border has a radius factor while the first row still has the sharp border on its top and they override with each other. If you don't want to use overflow for some reason, you can put radius element under both the table and that exact tr, and remember to put the radius on a fixed number like 5px, instead of a ratio like 2%, this way both borders will be the same shape and you won't have that problem.

June
  • 1