html+css做圆角表格

最新推荐文章于 2024-09-16 15:00:49 发布
最新推荐文章于 2024-09-16 15:00:49 发布
阅读量5.3k 收藏 1
点赞数
分类专栏： HTML CSS 文章标签： html css class border textbox table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxufewbt/article/details/1731679
版权
HTML 同时被 2 个专栏收录
39 篇文章 0 订阅
订阅专栏
CSS
7 篇文章 0 订阅
订阅专栏
marginwidth="0" marginheight="0" src="http://218.16.120.35:65001/PC/Global/images/b.html" frameborder="0" width="728" scrolling="no" height="90">

方法一
阅读代码编辑代码运行效果复制HTML代码保存代码<html><head>
    <title>css圆角效果</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <style type="text/css">

div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

</style>
</head><body>
<div class="RoundedCorner">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
    </b></b><br>
    无图片实现圆角框<br>
    <br>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
    </b></b>
</div>
</body></html><html><head>
    <title>css圆角效果</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head><body>
<div class="RoundedCorner">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
    </b></b><br>
    无图片实现圆角框<br>
    <br>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
    </b></b>
</div>
</body></html>


方法二
阅读代码编辑代码运行效果复制HTML代码保存代码<table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
    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="#908a47"></td>
            <td width="1"></td>
            <td width="1"></td>
            <td width="1"></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td bgcolor="#f7f8f9"></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47"></td>
            <td bgcolor="#f7f8f9" colspan="3"></td>
            <td bgcolor="#908a47"></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="#908a47"></td>
            <td id="oINNER" bgcolor="#f7f8f9">  </td>
            <td width="1" bgcolor="#908a47"></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 width="1" bgcolor="#908a47"></td>
            <td width="1" bgcolor="#f7f8f9"></td>
            <td bgcolor="#f7f8f9"></td>
            <td width="1" bgcolor="#f7f8f9"></td>
            <td width="1" bgcolor="#908a47"></td>
            <td width="1"></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td bgcolor="#f7f8f9"></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td></td>
        </tr><tr height="1">
            <td colspan="3"></td>
            <td bgcolor="#908a47"></td>
            <td colspan="3"></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr>
</tbody>
</table><table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
    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="#908a47"></td>
            <td width="1"></td>
            <td width="1"></td>
            <td width="1"></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td bgcolor="#f7f8f9"></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47"></td>
            <td bgcolor="#f7f8f9" colspan="3"></td>
            <td bgcolor="#908a47"></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="#908a47"></td>
            <td id="oINNER" bgcolor="#f7f8f9">  </td>
            <td width="1" bgcolor="#908a47"></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 width="1" bgcolor="#908a47"></td>
            <td width="1" bgcolor="#f7f8f9"></td>
            <td bgcolor="#f7f8f9"></td>
            <td width="1" bgcolor="#f7f8f9"></td>
            <td width="1" bgcolor="#908a47"></td>
            <td width="1"></td>
        </tr><tr height="1">
            <td></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td bgcolor="#f7f8f9"></td>
            <td bgcolor="#908a47" colspan="2"></td>
            <td></td>
        </tr><tr height="1">
            <td colspan="3"></td>
            <td bgcolor="#908a47"></td>
            <td colspan="3"></td>
        </tr>
        </tbody>
        </table>
    </td>
</tr>
</tbody>
</table>

方法三
阅读代码编辑代码运行效果复制HTML代码保存代码<html xmlns:v><head>
    <style>
 
v/:* {behavior: url(#default#VML);}

</style>
</head><body>
<v:roundrect style="position: relative; width: 200; height: 100px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px" />
    <v:textbox style="font-size: 12px">css实现真正的圆角表格</v:textbox>
</v:roundrect>
</body></html><html xmlns:v><head>
    <style>
v/:* {behavior: url(#default#VML);}
</style>
</head><body>
<v:roundrect style="position: relative; width: 200; height: 100px">
    <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px" />
    <v:textbox style="font-size: 12px">css实现真正的圆角表格</v:textbox>
</v:roundrect>
</body></html>

方法四

阅读代码编辑代码运行效果复制HTML代码保存代码<html>
<style type="text/css">

.rd{font-family: "宋体";font-size: 14px;height: 12px;width: 12px;margin: 0px;padding: 0px;line-height: 12px;}
#l{filter:DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0)DropShadow(Color=#00ccff,OffX=1,OffY=0);}
#r{filter:DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0)DropShadow(Color=#00ccff,OffX=-1,OffY=0);}
.tb{filter:DropShadow(Color=#cccccc,OffX=3,OffY=3);}#cn{font-family:"宋体";font-size: 14px;line-height:24px;}#en{font-family:"Verdana";font-size: 11px;}#ct{filter:DropShadow(Color=#ffffff,OffX=-1,OffY=-1)DropShadow(Color=#6699cc,OffX=1,OffY=1);position:relative;height:40px;}body{overflow:hidden;background:#eeeeee;}

</style>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tb">
<tr>
    <td class="rd" id="l">╭</td>
    <td valign="bottom">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td bgcolor="#000000" height="1"></td>
        </tr><tr>
            <td bgcolor="#00CCFF" height="7"></td>
        </tr>
        </table>
    </td>
    <td class="rd" id="r">╮</td>
</tr><tr>
    <td align="right">
        <table height="52" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="1" bgcolor="#000000"></td>
            <td bgcolor="#00CCFF" width="7"></td>
        </tr>
        </table>
    </td>
    <td bgcolor="#00CCFF" valign="top">
        <div id="ct">
            <label id="en">Fight for the cause of world peace!</label><br />
            <label id="Label1">The importance of a proper diet in maintaining health should not
                be disregarded.</label><br />
            <label id="cn">欢迎进入我们的网站，http://www.cc0773.com/</label>
            <label id="Label2">。</label>
        </div>
    </td>
    <td align="left">
        <table height="52" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td bgcolor="#00CCFF" width="6"></td>
            <td width="1" bgcolor="#000000"></td>
        </tr>
        </table>
    </td>
</tr><tr>
    <td class="rd" id="Td1">╰</td>
    <td valign="top">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td bgcolor="#00CCFF" height="5"></td>
        </tr><tr>
            <td bgcolor="#000000" height="1"></td>
        </tr>
        </table>
    </td>
    <td class="rd" id="Td2">╯</td>
</tr>
</table>
</body></html> 

html中表单设置圆角,使用css选择器来实现表格的四角变圆角——2019.9.6
weixin_39760295的博客
07-14 2208
这次对表格来一次操作，用css控制表格中的某个属性进改变。目的嘛就是为了熟悉属性选择操作。先获得表格~勇者培训中心课程安排星期星期一星期二星期三星期四星期五上午治疗战斗闪避体魄意志治疗战斗闪避体魄意志治疗战斗闪避体魄意志下午战斗闪避体魄意志治疗战斗闪避体魄意志治疗战斗闪避体魄意志治疗备注：还欠修女两枚金币接着再用css来改变样式table{border:1pxsolid#444;borde...
原生html+css实现表格圆角效果
weixin_44528408的博客
08-12 763
有个需求需要用原生html+css的原生table标签实现圆角表格。有的方式圆角会很模糊，或者有毛边，查找资料+调整后实现了这个功能。
HTML 中圆角的修饰和使用
最新发布
weixin_73955643的博客
09-16 184
需要清楚 四值 三值 二值 的分别代表概念
纯HTML实现圆角表格
griefforyou的程序人生
07-14 1768
  这是效果图，下面是代码                                                                                                                                  
html 圆角table
迪士尼公主的专栏
05-07 1366
http://www.w3.org/1999/xhtml">CSS*{margin:0;padding:0;}body { font: 11px Arial, sans-serif; padding: 10px; color: #333;}.divBox { padding: 10px; border-right: 1px solid #000; border-left: 1px solid #0
用HTML画出一个圆角的Table表格
02-16 608
 
HTML5+CSS3 制作圆角表格
qq_55786319的博客
11-03 758
知识点总结： :first-child 选择器匹配其父元素中的第一个子元素。 border-radius属性是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式。
CSS制作圆角表格
Yemy的专栏
12-29 2215
       u.corner u   {       height: 1px;       font-size:1px;       display: block;       overflow: hidden;       /*author: meizz*/       text-decoration: none;       background-color: green;   }   u.
css 圆角表格
peade的博客
09-27 287
今天在开发的发现，table设置border-collapse, border-radius,overflow三个属性，会和border属性发生冲突,下面这种写法，页面显示的border有大小，但是背景是透明的 table{ border-collapse: collapse; width: 85%; margin: 0.625rem auto; border...
HTML5+CSS边框圆角的设置方法与多背景图像/学习笔记
No1banana的博客
01-30 5188
一、圆角的设置方法 在网页中可以使用圆角的效果来丰富页面的显示效果，属性：border-radius可以将矩形边框四角圆角化。 border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径战术3 垂直半径参数4； 圆角 <style> div{ width: 300px; height: 300px; background: url("photo.png") center center no-repeat;
HTML5 + CSS3 chm中文参考手册.rar
12-08
HTML5和CSS3是现代网页开发的两大核心技术，它们共同为网页提供了丰富的表现形式和强大的交互功能。HTML5是超文本标记语言HTML的最新版本，它在原有的基础上引入了大量新元素，增强了网页的语义性和可访问性，同时...
圆角表格制作原理html,html做圆角表格
weixin_29000891的博客
05-31 450
将以下代码插入在合适的单元格位置中：style="table-layout: fixed" height=28 cellspacing=0 cellpadding=0width="50%" border=0> cellspacing=0 cellpadding=0 width="100%" border=0> cellspacing=0 cellpadding=0 border=0&g...
在网页中实现圆角表格
weixin_30470643的博客
06-04 345
首先是准备一个圆角图片，如下：圆角图片 页面中的div代码：<DIV class="rcborder"><DIV class=rct><DIV class="l tl1"></DIV><DIV class="r tr1"></DIV></DIV><div class="content"></...
html5 table 圆角
黄彪博客
09-07 9247
在工作中遇到这么一个问题 —— 美工画了一个表格，表格是使用圆角的。发现table这个标签画圆角很麻烦，因此使用了如下技术解决问题： 1、div 以 display : table;显示 2、border-radius: 10px 0px 0px 0px;顺序依次是 上 右 下 左 3、通过CSS3伪类查找，设置样式   .div_table{ display: table;} .
如何只用HTML画出一个圆角的Table表格?
Ben's Bloggings
10-11 2576
By Ben实现代码如下:  
css+div打造圆角“表格”
翔的窝窝
06-06 1139
应该说是圆角矩形区域比较确切，因为这些块虽然是“圆角”的，但没有一种是“表格”，所以说“圆角表格”的叫法是不确切的。 div.bg{...}{background:#ffc20e;width:50%}b{...}{display:block;}/**//*将所有B标签转成块级元素*/div b.topb b,div b.bottomb b{...}{height:1px;overflo
table 圆角 html5 css3
10-16
table 圆角 html5 css3
圆角表格代码
11-27
<TABLE fixed" height=28 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR height=3 width="100%"> <TD> <TABLE 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=#908a47></TD> <TD width=1></TD> <TD width=1></TD> <TD width=1></TD> </TR> <TR height=1> <TD></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD bgColor=#f7f8f9></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD></TD> </TR> <TR height=1> <TD></TD> <TD bgColor=#908a47></TD> <TD bgColor=#f7f8f9 colSpan=3></TD> <TD bgColor=#908a47></TD> <TD></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR> <TD> <TABLE fixed" height="100%" cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD width=1 bgColor=#908a47></TD> <TD id=oINNER bgColor=#f7f8f9>  </TD> <TD width=1 bgColor=#908a47></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR height=3 width="100%"> <TD> <TABLE fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR height=1> <TD width=1></TD> <TD width=1 bgColor=#908a47></TD> <TD width=1 bgColor=#f7f8f9></TD> <TD bgColor=#f7f8f9></TD> <TD width=1 bgColor=#f7f8f9></TD> <TD width=1 bgColor=#908a47></TD> <TD width=1></TD> </TR> <TR height=1> <TD></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD bgColor=#f7f8f9></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD></TD> </TR> <TR height=1> <TD colSpan=3></TD> <TD bgColor=#908a47></TD> <TD colSpan=3></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值