织梦二次开发,二次开发,李丕长,网站php二次开发,做网站,模板设计,jquery效果,jquery特效

当前位置: 主页 > 网友推荐 >

Tables with border-radius 表格支持border-radius属性

时间:2013-11-20 17:42作者:露馨儿 点击:
Tables with border-radius 使用表格支持border-radius属性
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css" media="screen">
<!--
td, th {
height: 90px;
width: 90px;
}
table {
border: 1px solid red;
padding: 0;
border-collapse: separate;
border-radius: 15px;
border-spacing: 0
}
td, th {
text-align: center;
vertical-align: middle;
background: pink;
border: none;
}
td + td, th + th {
border-left: 1px solid #555
}
th, tr td {
border-bottom: 1px solid #555;
}
tfoot td {
border-bottom: none
}
td:first-child {
border-left: none
}
td:last-child {
border-right: none
}
thead +tr td, tr+ tr td, tfoot td {
border-top: none;
}
th:first-child {
-webkit-border-radius: 15px 0 0 0;
border-left: none
}
th:last-child {
-webkit-border-radius: 0 15px 0 0;
border-right: none
}
tfoot td:first-child {
-webkit-border-radius: 0 0 0 15px;
}
tfoot td:last-child {
-webkit-border-radius: 0 0 15px 0;
}
-->
</style>
</head>
 
<body bgcolor="#ffffff">
<table  border="1" cellspacing="2" cellpadding="0">
  <thead>
    <tr>
      <th>Hello</th>
      <th>HI</th>
      <th>HOLA!!!</th>
      <th>It's fun to style things!</th>
      <th></th>
    </tr>
  </thead>
  <tr>
    <td></td>
    <td>YEs, it is!</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>YEs, it is!</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tfoot>
    <tr>
      <td>aaa</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>
</body>
</html>

顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
露馨儿 查看详细资料 发送留言 加为好友 用户等级:高级会员 注册时间:2013-06-08 09:06 最后登录:2014-02-20 15:02
无觅相关文章插件,快速提升流量