常用细线表格的CSS实现

最新推荐文章于 2024-08-29 14:28:04 发布
最新推荐文章于 2024-08-29 14:28:04 发布
阅读量3k 收藏 1
点赞数
分类专栏： CSS 文章标签： css table border class web开发 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunyujia/article/details/2478670
版权

    没什么技术含量的东西，今天在老紫竹的群里有人提到这个东西，我想整理出来会方便大家。尤其是不常做web开发的人。我知道的方法一共就4种，如果有朋友发现第5种一定要告诉我，追加进去分享快乐。

    注意：后两种方法在空td中必须利用 来进行补白。当然可以多种方法混合使用。   

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title></title>

        <style>

            th{

                background: yellow;

            }

            .table1{

                empty-cells: show;

                border-collapse: separate !important;

                border-collapse: collapse;

            }

            .table2{

                background-color: #808080;

            }

            .table2 td{

                background-color: #fff;

            }

            .table3{                

                border-top: 1px solid silver; 

                border-right: 1px solid silver; 

            }

            .table3 td,.table3 th{

                border-left: 1px solid silver;

                border-bottom: 1px solid silver;

            }

            .table4 th{

                border-right: 1px solid silver;

                border-bottom: 1px solid silver;

            }

        </style>

    </head>



    <body>

        <table class="table1" border="1">

            <tr>

                <th>标题一</th>

                <th></th>

                <th>标题一</th>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>内容三</td>

            </tr>

            <tr>

                <td></td>

                <td>内容二</td>

                <td>内容三</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td></td>

                <td>内容三</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td></td>

            </tr>

        </table>

        <br>

        <table class="table2" border="0" cellspacing="1">

            <tr>

                <th>标题一</th>

                <th></th>

                <th>标题一</th>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>内容三</td>

            </tr>

            <tr>

                <td></td>

                <td>内容二</td>

                <td>内容三</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td></td>

                <td>内容三</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td></td>

            </tr>

        </table>

        <br>

        <table class="table3" border="0" cellspacing="0">

            <tr>

                <th>标题一</th>

                <th>&nbsp;</th>

                <th>标题一</th>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>内容三</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>内容二</td>

                <td>内容三</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td>&nbsp;</td>

                <td>内容三</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>&nbsp;</td>

            </tr>

        </table>

        <br>

        <table class="table4" border="1" cellspacing="0"  borderColorDark="#ffffff">

            <tr>

                <th>标题一</th>

                <th>&nbsp;</th>

                <th>标题一</th>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>内容三</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>内容二</td>

                <td>内容三</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td>&nbsp;</td>

                <td>内容三</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>&nbsp;</td>

            </tr>

        </table>

    </body>

</html>

sunyujia
关注
专栏目录
css 细线表格 css制作table细线表格常用属性
12-13
Css制作table细线表格 1、介绍了一个不常用属性：border-collapse:collapse; 2、使用了一个属性缩写技巧：border:style color;border-width:上 右 下 左; <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Ty
表格的css,细线表格
huozhicheng的专栏
04-02 1889
<br />表格的css,细线表格<br />table{ width:80%; margin:0px auto; font:Georgia 11px; font-size:12px; color:#333333; text-align:center; border-collapse:collapse;/*细线表格代码*/ } table td{ border:1px solid #999;/*细线表格线条颜色*/ heig
css3 使用 display: grid 画表格table
黄彪博客
07-25 334
肯定是可以的，只是比较麻烦，因此使用grid布局，写个demo方便以后快速复制和学习。在工作中，需要使用CSS 画表格（类似于我们去行政单位，填写表格的样子），如果使用。
css grid布局实现一个复杂表格
最新发布
weixin_40451732的博客
08-29 454
就可以实现产品所需的效果了，也庆幸产品的表格是固定的，没有新增删除啥的，要不然真的麻瓜了。就代表合同两行，已经配置成动态的了，最多可以写到15行。好像嵌套的比较麻烦，还要合并单元格，所以采用了。但是这种写法不能通用，发现上面这个方法更好。当然表格内容格式是固定的，本来想用。的，但是思考了一下，用。这个需求也再次认识了。
js for加减乘除
Xerale的博客
08-20 449
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
Css制作table细线表格
weixin_30387423的博客
03-07 134
制作细线表格，我想应该是最基本的css知识了，记录下来巩固下。 推荐： table{ border-collapse:collapse; border: 1px solid #000000; } td{ border-collapse:collapse; border: 1px solid #000000; } ...
css创意ul+li实现的细线表格实现代码
10-30
css创意ul+li实现的细线表格实现代码 css创意ul+li实现的细线表格效果，不用table，是一种非常有创意的网页设计方法。通过使用ul和li标签，可以创建一个细线表格的效果，而不需要使用传统的table标签。 ul和li...
html制作细线表格的简单实例
12-14
以下是对细线表格制作原理的详细解释。 首先，我们要了解HTML表格的基本结构。一个表格由`<table>`标签定义，其中包含`<tr>`（行）标签，`<tr>`标签内包含`<td>`（单元格）或`<th>`（表头单元格）标签。表格的样式...
dw改变表格边框颜色.pdf
02-27
细线边框是网页中定位区分内容常用的方法，配合特定图片的使用，往往能够达到不错的效果。那如何制作细线边框呢？大家都知道，所谓细线边框，大体外观上就是一个简单的 1 行 1 列表格，那么我们直接把表格对象的 ...
细线表格制作技巧－表格边框样式设置集锦（转）
wenhongling的博客
01-12 293
< font>下面的细线表格是设置bordercolordark来实现的，因为默认的border其实宽度是2，即使设置为1也没用，bordercolorlight和bordercolordark一起作为表格的边框。所以设置其中一个为背景色，表格边框看起来就会细一些。 &nbsp; &nbsp; &nbsp; &nbsp; ...
三种细线表格CSS代码
CHBOS的专栏
07-30 3489
背景设置式－细边框表格texttexttexttext 边框设置式－细边框__表格2 边框设置式－细边框表格texttexttexttext
前端基础-CSS细线表格
逍遥云恋
03-30 647
细线表格 语法：border-collapse:collapse; 示意图 注意：一定要加在table标签上，且表格和单元格都加边框属性
【CSS】盒子边框 ③ ( 设置表格细线边框 | 合并相邻边框 border-collapse: collapse； )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-16 2229
一、设置表格细线边框 1、表格示例 2、合并相邻边框 3、完整代码示例
CSS：表格的细线边框
听海边涛声
06-21 181
CSS：表格的细线边框
用CSS制作细线表格
weixin_33815613的博客
03-29 212
用HTML做表格简直太轻松了，看一遍例题就会了，做细线表格也不难，用DW顶多修改几个值就可以了，但是总是用鼠标点来点去，不免会想：有满意用一行代码就解决这个问题呢？于是问老师，答案是肯定有的，就是用CSS可以完成这个作业那CSS是什么呢？CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。我...
什么？你居然会做三线表
人类工程师的博客
08-31 356
table{ width: 600px; height: 200px; border-collapse: collapse; } thead{ border-top-width: 4px; border-top-style: solid; border-top-color:black; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-co.
细线表格的几种做法（css）
小宝
05-08 296
(一)效果一般&lt;style type="text/css"&gt;&lt;!--table {border-collapse:collapse;}td{border-left:0;border-top:0;border-right:1px solid #00cd11;border-bottom:1px solid #cb1122;font-family:"Courier New", Cour...
CSS中的三大样式
Meatball_MMY的博客
04-18 471
1.行内样式 复合样式 border: 1px solid silver border-left:1px solid silver border-left-style:solid border-left-color:silver border-left-width:1px; border-right:1px solid silver border-top:1px ...
用CSS实现细线表格效果
03-29
可以使用以下CSS代码实现细线表格效果： ```css table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ddd; padding: 8px; text-align: left; } tr:nth-child(even) { ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值