用html和css实现圆角表格
我们先看下效果图：
其中代码包括2个部分，css代码和html代码
CSS实现圆角表格：
<html xmlns:v>
<head>
<style>
v:* {behavior: url(#default#VML);}
</style>
</head>
<body>
<v:RoundRect style="position:relative;width:400;height:100px">
<v:textbox style="font-size:12px">css实现真正的圆角表格</v:textbox>
</v:RoundRect>
</body>
</html>
HTML实现圆角表格
<TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="50%" border=0>
<TBODY>
<TR height=3 width="100%">
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD bgColor=#2a68bc></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#2a68bc colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#2a68bc colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#2a68bc></TD>
<TD bgColor=#f7f8f9 colSpan=3></TD>
<TD bgColor=#2a68bc></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR>
<TD> <TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=1 bgColor=#2a68bc></TD>
<TD id=oINNER bgColor=#f7f8f9 height="200" style="font-size:14px">html实现真正的圆角表格 </TD>
<TD width=1 bgColor=#2a68bc></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR height=3 width="100%">
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1>
<TD width=1></TD>
<TD widh=1 bgColor=#2a68bc></TD>
<TD width=1 bgColor=#f7f8f9></TD>
<TD bgColor=#f7f8f9></TD>
<TD width=1 bgColor=#f7f8f9></TD>
<TD width=1 bgColor=#2a68bc></TD>
<TD width=1></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#2a68bc colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#2a68bc colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1>
<TD colSpan=3></TD>
<TD bgColor=#2a68bc></TD>
<TD colSpan=3></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TBODY>
</TABLE>
| 附件 | 大小 |
|---|---|
| 2965181471221465012.jpg | 3.13 KB |
太笼统!
太笼统!