jQuery CSS3 Rounded Table Corners
Recently, I had a desire to round the corners of my some tables I was using in a project. This project is to be very image light and I did not want to use images. I also wanted to use collapsed tables so normal css3 functions such as -webkit-border-radius would not work by default. Realizing that it was ok for Internet Explorer to not have the rounded look, but only function properly, I decided the solution was to write a jQuery plugin that would use -webkit-border-radius/-moz-border-radius and emulate a collapsed table.
Enter tableCorners.
This is a very simple jQuery plugin that does just that. It will take a regular table, set the cell spacing to 0 and then round the top and bottom corner cells properly to emulate a collapsed rounded table. It supports thead, tbody, and tfoot and plain old tables. It requires nothing more to use then the following.
$("#tableID").tableCorners();
Beyond those default basics, it also supports the following options (defaults listed):
$("#tableID").tableCorners({ collapse: true, thead: true, tbody: true, tfoot: false, radius: '4px' });
It will take a table from this:
Table without tableCorners
to this:
Table with tableCorners applied.
Here is the source:
/* Copyright (c) 2010 Don Magee Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ (function($){ $.fn.tableCorners = function(options) { var defaults = { collapse: true, thead: true, tbody: true, tfoot: false, radius: '4px' }; var options = $.extend(defaults, options); return this.each(function() { obj = $(this); $(this).css('-moz-border-radius', options.radius); $(this).css('-webkit-border-radius', options.radius); if(options.collapse) { obj.attr('cellspacing', '0'); } if(options.thead) { $(obj).find('thead tr:first th:first').css('-moz-border-radius-topleft', options.radius); $(obj).find('thead tr:first th:first').css('-webkit-border-top-left-radius', options.radius); $(obj).find('thead tr:first th:last').css('-moz-border-radius-topright', options.radius); $(obj).find('thead tr:first th:last').css('-webkit-border-top-right-radius', options.radius); } if(options.tbody) { if(!options.thead) { $(obj).find('tbody tr:first td:first').css('-moz-border-radius-topleft', options.radius); $(obj).find('tbody tr:first td:first').css('-webkit-border-top-left-radius', options.radius); $(obj).find('tbody tr:first td:last').css('-moz-border-radius-topright', options.radius); $(obj).find('tbody tr:first td:last').css('-webkit-border-top-right-radius', options.radius); } if(!options.tfooter) { $(obj).find('tbody tr:last td:first').css('-moz-border-radius-bottomleft', options.radius); $(obj).find('tbody tr:last td:first').css('-webkit-border-bottom-left-radius', options.radius); $(obj).find('tbody tr:last td:last').css('-moz-border-radius-bottomright', options.radius); $(obj).find('tbody tr:last td:last').css('-webkit-border-bottom-right-radius', options.radius); } } if(options.tfoot) { $(obj).find('tfoot tr:last td:first').css('-moz-border-radius-bottomleft', options.radius); $(obj).find('tfoot tr:last td:first').css('-webkit-border-bottom-left-radius', options.radius); $(obj).find('tfoot tr:last td:last').css('-moz-border-radius-bottomright', options.radius); $(obj).find('tfoot tr:last td:last').css('-webkit-border-bottom-right-radius', options.radius); } if(!options.tbody && !options.thead && !options.tfoot) { $(obj).find('tr:first td:first').css('-moz-border-radius-topleft', options.radius); $(obj).find('tr:first td:first').css('-webkit-border-top-left-radius', options.radius); $(obj).find('tr:first td:last').css('-moz-border-radius-topright', options.radius); $(obj).find('tr:first td:last').css('-webkit-border-top-right-radius', options.radius); $(obj).find('tr:last td:first').css('-moz-border-radius-bottomleft', options.radius); $(obj).find('tr:last td:first').css('-webkit-border-bottom-left-radius', options.radius); $(obj).find('tr:last td:last').css('-moz-border-radius-bottomright', options.radius); $(obj).find('tr:last td:last').css('-webkit-border-bottom-right-radius', options.radius); } }); }; })(jQuery);
Please remember that this script only rounds corners in browsers that support -webkit-border-radius and -moz-border-radius (read this as no IE support). However, the script will fail gracefully and the page will work in IE just fine (except for no rounded corners).
Hmmmm…
My IE7 show me a rounded table corners on this page…
Whats wrong for me?
The examples I have on this page are actually images. I was in a hurry and just used images from my test project.
Wow…great! I’m thinking of adding them to my pages now.
This is nice..
i am planning to add it up to my website.
I can’t get it working?
Can you show us the table html please?
Thanks
This only works if you have border-collapse: seperate; in your CSS. It uses cellspacing to mimic collapse, but it doesn’t work if you want a single-pixel border on your table cells.
Great post .i found it as very helpful thank’s………