Cannot get rounded corners on a table
I have a flash website with an ugly form (constructed via a table) on it. (I need to use flash because I am using one of those template sites.)
I am trying to round the top corners of the header (title area) and the bottom corners of the footer (submit area) that works with IE too.
I have seen several websites describing how to round textboxes (or text areas) but none for tables except with graphics via photoshop. I have tried to do that, but it is apparently above my skill level because it is not working!
I have had a little luck with generateit.net which provides an html snippet. But, it is also designed for a textbox and I am getting erratic results.
I would post my webpage but I have not yet published it. I can see it on my account at the template website. Trust me, though. They are erratic. Can anyone point me to a website that can help me with html code for a table with rounded edges (withou开发者_开发百科t graphics)?
Thank you very much!
Because this question's sat, 'unanswered1,' for a while I thought I'd expand my comments as an answer:
The table
element, and its valid child elements (thead
, tbody
, tfoot
, tr
, th
and td
), presumably due to the inherent nature of a table (though I have no reference to support, or explain, that assumption) refuse to accept or apply the border-radius
property: JS Fiddle demo, tested in Chrome 8.x and Firefox 3.6.x on Ubuntu 10.10.
To get around this, as @Pekka suggests, it's possible to wrap the table in a div
and apply border-radius
to that, along with overflow: hidden;
to prevent the corners of the table
appearing outside of the curved borders of the div
itself.
In the demo I put together for this I used a heavier border for the containing div
to reduce the antialiasing artefacts where the curved border meets the table
border, but, obviously, used the same colour for both elements.
html:
<div id="container">
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th rowspan="2">Age</th>
</tr>
<tr>
<th>Family</th>
<th>First</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Age information from Wikipedia</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Freeman</td>
<td>Martin</td>
<td>39</td>
</tr>
<tr>
<td>Freeman</td>
<td>Morgan</td>
<td>73</td>
</tr>
</tbody>
</table>
</div>
css:
#container {
border-radius: 1em;
border: 2px solid #ccc;
min-width: 30%;
display: inline-block;
overflow: hidden;
}
th, td {
border: 1px solid #ccc;
padding: 0.3em 1em;
font-family: sans-serif;
}
th {
vertical-align: top;
font-weight: bold;
}
JS Fiddle Demo.
- Outside of those posted in the comments to the question (above).
精彩评论