CSS简介代码实现表格(table)只有横线没有竖线的效果，一个简约卡片化精美的数据表格(类似Bootstrap表格)

已于 2025-08-10 16:03:14 修改
阅读量1.4w 收藏 26
点赞数 11
CC 4.0 BY-SA版权
分类专栏： + CSS 文章标签： css 表格 只有横线没有竖线 类似bootstrap表格 精美表格
于 2019-11-23 21:36:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/103218958
+ CSS 专栏收录该内容
63 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了一种使用CSS简化表格边框显示的方法，通过设置border-collapse属性取消默认边框，并为table, th, tr, td元素添加自定义底部边框，实现清晰整洁的表格布局。

在这里插入图片描述

实现效果

了解本专栏 订阅专栏 解锁全文
HTML Table 漂亮的CSS
03-26
HTML Table 漂亮的CSS 包含了格式各样的CSS，代码非常独立，肯定能够让你用到的。
好看table样式 好看的CSS——Table样式表
04-01
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
CSS样式Table[2] - CSS3Tables
11-29
CSS样式Table - CSS3Tables
CSS Table属性
{玖}单纯着，幸福着，思考着
10-10 226
     属性                                             描述 border-collapse 设置是否把表格边框合并为单一的边框。 border-spacing 设置分隔单元格边框的距离。（仅用于 "separated borders" 模型） caption-side 设置表格标题的位...
CSS Table
JunChow
05-29 626
表格布局有两种使用方式，一种是使用HTML提供的table标签，一种是使用CSS提供的display:table属性。CSS提供的display:table属性主要为表设置表格布局算法，CSS Table实际上是使用CSS属性模仿HTML Table的布局模型。 HTML Table是包含语义化的标签，它描述了什么是数据，因此最好是用于标记那些需要制表的数据，比如财务信息表。如果数据能够以电子表格...
bootstrapTable实现表格内数据的添加、删除、修改、查询
最新发布
09-11
BootstrapTable是一个基于Bootstrap的jQuery表格插件，它提供了一种便捷的方式来展示和操作数据。通过使用BootstrapTable，开发者能够轻松实现表格数据的增、删、改、查（CRUD）功能，而无需从零开始编写大量的前端...
Bootstrap table表格初始化表格数据的方法
01-19
　②bootstrap-table使用需要下载对应的css和js插件 　③具体详情还需查看api文档 二、前端代码 <div class=table-responsive> <table id=table class=text-nowrap> </table> 【说明】 ①text-nowrap设置表格...
BootStrap table实现表格行拖拽效果
01-19
本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码，供大家参考，具体内容如下 不上图了 首先还是得添加三个文件，自己上网搜搜就行 [removed][removed] [removed][removed] <link href=~/Content/...
bootstrap-table+treegrid实现树形表格
12-10
实现一个树形表格的时候有多种方法：比如把 ztree 的树形直接拼接成表格，或者用强大的 jqgrid 实现，今天介绍一个比较轻量级的实现：使用bootstrap-table + treegrid 。 1、引入 jquery.js、bootstrap-table.js、...
CSS Table（表格）
隔壁小王的博客
03-20 9203
**首先介绍表格标签**一个完整的表格示例如下<table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table>table标签：表格 tr标签：表格中的每一行 th标
css:table
学习园地
01-19 243
table 标签 table 标签中常用的子元素: <tr>代表行 <td>代表行中的单行格子 table 常用技巧 1. 单元格边框合并 table { border-collapse:collapse; } 这样单元格与单元格之间就是看上去合并的效果, 中间没有空隙 2. 空单元没有数据单元格不展示 <table> <tr> <td>1</td> <td>2</td> <td&
CSS-table表格
qq_54282411的博客
06-15 1877
一、表格的创建 表格由<table>开始,</table>结束。除此之外还需要行元素<tr>和单元格元素<td> 语法格式： <table> <tr> <td>单元格内的文字</td> …… </tr> …… </table> 解释： <table></table>：用于定义一个表格 <tr></tr>：用于定义
【CSS表格table】
魔术师
06-10 1309
【CSS表格table】 表格（table）是什么？做什么用的？ 表格主要用于向用户呈现数据，尽量不要用于布局。 表格（table）的基本元素 caption：元素定义表格标题； thead：标签定义表格的表头； tbody：标签表格主体（正文）； tfoot：标签定义表格的页脚（脚注或表注）；
Table布局
WindRunnerMax
04-07 1658
Table布局 <table>最常用的也是最正确的使用方法是制作表格，由于其对占据的空间有着划分的作用，便可以使用<table>来布局。 实例 实现一个简单的布局，将表格的border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用，如果布局复杂，可以在单元格中再嵌套表格，单元格中的元素或者嵌套的表格用a...
html表格取消内部竖线的五个步骤，实例在线
weixin_47378963的博客
04-06 2651
【代码】html表格取消内部竖线的五个步骤，实例在线。
table css border
zhuixunhebe1的专栏
03-08 470
大家经常会发现Table的BORDER设置为1，得到的边框却不是想要的1个像素的细边框，于是很多人去想方设法做出细边框的效果。 设置Table的细边框通常有这么几种方式： 1、设置边框的BORDER=0 、cellspacing=1，设置Table的背景色为所要的边框色，再设置所有的td背景色为白色，这样细边框就显露出来了。这个方法有些邪气，看似不太正宗，但是也能达到效果，条条大路通罗马嘛！
【CSS 表格属性（Table）】
Hey_Coder
11-26 5589
CSS 表格属性 Tableborder-collapse 属性border-spacing 属性caption-side 属性empty-cells 属性table-layout 属性 用于 属性名 CSS 版本 合并 表格边框。 border-collapse 2 相邻 单元格边框 之间的 距离。 border-spacing 2 表格标题的 位置。 caption-...
CSS设置table
西卡卡的博客
08-31 1006
CSS设置table 中td的内容自动换行 表格中显示的内容不是中文而是纯数字或英文时，默认是不换行的（中文默认换行），想要设置换行，需要在table中加上一下样式，即可实现td中的内容自动换行 &lt;table style="word-wrap:break-word; word-break:break-all;"&gt; &lt;/table&gt; 设置后效果图如下： tab...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不秃头的媛

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值