[英]Cannot get rounded corners on a table
I have a flash website with an ugly form (constructed via a table) on it. 我有一个Flash网站,上面有一个丑陋的表格(通过表格构建)。 (I need to use flash because I am using one of those template sites.)
(我需要使用Flash,因为我正在使用这些模板网站之一。)
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. 我正在尝试舍入与IE兼容的页眉(标题区域)的顶部和页脚(提交区域)的底部。
I have seen several websites describing how to round textboxes (or text areas) but none for tables except with graphics via photoshop. 我见过几个网站描述如何舍入文本框(或文本区域),但是除了通过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. 我的generateit.net有点运气,它提供了一个html代码段。 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 (without graphics)?
谁能指向我一个网站,该网站可以为带有圆角边缘(无图形)的表格的html代码提供帮助?
Thank you very much! 非常感谢你!
Because this question's sat, 'unanswered 1 ,' for a while I thought I'd expand my comments as an answer: 因为这个问题坐了一段时间,“未回答1 ”,所以我以为我会扩展我的评论作为答案:
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 . table
元素及其有效的子元素( thead
, tbody
, tfoot
, tr
, th
和td
),大概是由于表的固有特性(尽管我没有引用或解释该假设)拒绝接受或应用border-radius
属性: JS Fiddle演示,已在Ubuntu 10.10的Chrome 8.x和Firefox 3.6.x中进行了测试 。
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;
为了解决这个问题,因为@Pekka暗示,它可能包住表中一个
div
和应用border-radius
到 ,随着overflow: hidden;
to prevent the corners of the table
appearing outside of the curved borders of the div
itself. 以防止
table
的角出现在div
本身的弯曲边界之外。
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. 在此示例中,我为此使用了一个较重的边框作为包含
div
以减少弯曲边框与table
边框交汇处的抗锯齿效果,但是显然,两个元素使用了相同的颜色。
<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>
#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 . JS提琴演示 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.