table 边框完全去掉

最新推荐文章于 2024-04-24 17:58:49 发布
最新推荐文章于 2024-04-24 17:58:49 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： 转载文章 自己编写 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyzxzws/article/details/84424653
版权

问题描述：项目需要，在做表格时有时需要把边框完全去掉；

解决方案：

    方案一：http://blog.163.com/j_olo/blog/static/10710119020112302535876/（蒋东峰的博客）

.表格中边框的显示

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>

只显示左、右边框 <table frame=vsides>

只显示上、下边框 <table frame=hsides>

只显示左边框 <table frame=lhs>

只显示右边框 <table frame=rhs>

不显示任何边框 <table frame=void>



.表格的分隔线可以隐藏

<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线

<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线

<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线

-------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<TABLE cellSpacing=0 cellPadding=0 width="90%" align=right border=1 rules=rows frame=hsides style="border-collapse:collapse ; " bordercolor="#000000" >

<TR>
<TD >sadad</TD>
<TD >sad</TD>
<TD>dsa</TD>
<TD>asd</TD>
</TR>
<TR>
<TD >ads</TD>
<TD>asd</TD>
<TD>ads</TD>
<TD>asds</TD>
</TR>

</TABLE>
</BODY>
</HTML>


table width=1 就已经把宽度设置为 1 了
我们面临的问题是这样的，每一个 td 边线都是 1px，table 边线也是 1px。那么当两个td相邻的时候，因为每个 td 边线都是1，所以靠进的时候边线的“宽度和”就是 1+1=2。当 td 和 table 相邻时，同样。

collapse :　 相邻边被合并
相邻边被合并！以前我说的 1+1=2 就是因为 td 和td之间，td 和table 之间相邻边的问题。默认时相邻边没有合并，所以就是 1+1=2。现在我们使用 border-collapse:collapse把我们合并了，所以宽度还是 1px。也就是出现细线边框了





设置Table的细边框通常有这么几种方式：

1、设置边框的BORDER=0 、cellspacing=1，设置Table的背景色为所要的边框色，再设置所有的td背景色为白色，这样细边框就显露出来了。这个方法有些邪气，看似不太正宗，但是也能达到效果，条条大路通罗马嘛！

再来看看第二种方法：

2、设置BORDER=0 ，再通过CSS，给Table加上1px的border-top,border-left，然后再设置所有的td的border-right,border-bottom，这样也能达到所要的效果。可见CSS很是强大啊。

今天在实践过程中发现，以上两种方式生成的HTML在Word中打开则发生问题，不能达到预期效果。怎么办呢！？

下面介绍一种更为简便有效的方法：

3、设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;}，大功告成！而且Word也能认出这种设置。

第三种方法最好，我也是在导出word时，很多css失效的情况下，找到了这个解决办法！

 

nerdzws
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向现代浏览器，高效的简洁 API 设计 模块化表格、按需加载、插件化扩展 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能 功能： Basic table （基础表格） Grid （高级表格） Size （尺寸） Striped （斑马线条纹） Table with border （带边框） Cell style （单元格样式） Column resizable （列宽拖动） Maximum table height （最大高度） Resize height and width （响应式宽高） Fixed column （固定列） Grouping table head （表头分组） Highlight row and column （高亮行、列) Table sequence （序号) Radio （单选) Checkbox （多选） Sorting （排序） Filter （筛选） Rowspan and colspan （合并行或列） Footer summary （表尾合计） Import （导入) Export （导出) Print （打印) Show/Hide column （显示/隐藏列） Loading （加载中） Formatted content （格式化内容） Custom template （自定义模板） Context menu（快捷菜单） Virtual Scroller（虚拟滚动） Expandable row （展开行） Pager（分页） Form（表单） Toolbar（工具栏） Tree table （树形表格) Editable CRUD（增删改查) Validate（数据校验） Data Proxy（数据代理） Keyboard navigation（键盘导航） Modal window（模态窗口） Charts（图表工具） 更新日志： v4.0.20 table 修改单选框、复选框获取值错误问题 grid 修复 KeepAlive 中报错问题
用CSS样式描述表格Table边框
12-11
<html><head><title>HTML Table</title></head> <style type=”text/css”> TABLE { background: blue; border-collapse: separate; border-spacing: 10pt; border-top: 15px solid red; border-left: 15px solid red; border-right: 5px dashed black; border-bottom: 10px dashed blue; } TD, TH { background: white; bord
让table中的td没有边界
Slience
11-29 1万+
本想做一个鼠标移动到某一行，那一行的背景色就变，以突出显示，我最初的代码如下 table{ width: 50%; margin: 0 auto; height: 200px; text-align: center; } tr:hover { background: lightgrey; }
记录：table 表格嵌套去除子表格外边框样式
mio115的博客
05-29 281
父table样式：
（Element UI 组件 Table）去除单元格底部的横线
weixin_44281141的博客
04-14 3773
Element UI 组件 Table 有一个属性 border，添加它可以增加纵向边框，但是无法控制横线边框，因此即使是最简单的 el-table，也会包含一个底部横线。这个底部横线其实是一个 border-bottom，不过对于表头使用了 th 元素，对于表数据使用了 td 元素，因此修改的时候需要兼顾两种元素。如果你只是修改表数据的样式，而不修改表头，那只需修改 td 元素。修改方式：在 style 标签添加如下样式即可。
table去外边框实现“＃”字效果
qingweiduzhong的专栏
01-17 756
表格中边框的显示 只显示上边框 &lt;table frame=above&gt; 只显示下边框 &lt;table frame=below&gt; 只显示左、右边框 &lt;table frame=vsides&gt; 只显示上、下边框 &lt;table frame=hsides&gt; 只显示左边框 &lt;table frame=lhs&gt; 只显示右边框 &lt;table...
table 表格去掉 td 的边框和间隙
m0_65284931的博客
07-01 2840
table 表格去掉td的边框和间隙
HTML中Table去掉两边的边框
热门推荐
Smile丶不忘初心
11-29 3万+
HTML中Table去掉左右两边的边框 .table {     text-align: center;   }   .table table {     font-size: 14px;     border-collapse: collapse;     width: 70%;     table-layout: fixed;     text-align: center;     line...
表格的边框如何去掉？
qq_35673096的博客
11-07 1602
随后在查属性，才得知这不是border，是间隙，border-collapse，将border-collapse:collapse设置即可，ok实现啦。首先我把border去掉了依然不生效，无论是table，还是tr td ,border:none是无效的。在做一个数据展示的时候，要求，表格间隔不同的背景色显示，于是出现了此效果。
el-table表格去掉边框
weixin_51747462的博客
06-13 2863
去掉el-table的边框
一个属性border-collapse解决Table的边框问题
09-25
表格的边框算是页面制作中最头痛的，带边线的表格在之前非常讨厌做，不过今天终于解决了这个问题，下面将示例与大家分享下
JavaScript Table行定位效果
05-20
程序中为了更美观会自动去掉新table上面和下面的边框，包括frame和style的： Code if(this._oTable.border > 0){ switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable...
CSS去除表格的默认间距并且制作1px的细线表
12-29
现在在所谓“div css”的风气下，很多人放弃了表格，其实应该让每个标签物尽其用，在表现数据的地方，我们还是应该使用table。...<table class=dir> 如何通过CSS去除表格默认样式的间距</caption> <tr> <th
关于css溢出
最新发布
weixin_44283589的博客
04-24 159
当四个元素之间存在空白字符时，这些空白字符会占据一定的宽度，导致元素超出了父容器的宽度，从而换行或掉下来。文字溢出：如果四个元素中的文本内容过长，并且没有设置溢出处理方式（如使用 ellipsis），文本内容可能会导致元素宽度超出父容器的宽度，从而换行或掉下来。边框和内边距：如果四个元素设置了边框或内边距，这些边框和内边距会增加元素的实际宽度，导致元素超出了父容器的宽度，从而换行或掉下来。浮动元素：如果四个元素的前面或后面存在浮动元素，浮动元素会影响到后续元素的布局，导致元素换行或掉下来。
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题
weixin_49256908的博客
04-24 76
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题
CSS引入的三种方式
weixin_59272777的博客
04-24 427
样式引入方式特点优点缺点适用场景内联样式（Inline Styles）在HTML元素内部使用style属性定义样式直观、快速，无需额外编写CSS代码不利于样式统一管理和复用，增加HTML文档复杂性对单个元素进行临时或快速样式调整，无需多页面复用内部样式表（Internal Stylesheets）在HTML文档的部分使用标签定义样式样式集中管理，HTML文档结构更清晰需在每个页面部分重复编写样式，不利于样式复用和共享。
css中设置元素大小的属性block-size
qwguo
04-18 474
的逻辑组合，允许你同时设置元素的最小和最大高度。这些属性旨在让布局不再依赖于传统的物理方向（如上下左右），而是基于逻辑方向（如开始、结束、之前、之后）。这有助于在水平和垂直方向都能更好地控制布局，特别是在多语言环境中，其中文本可能从右到左或从下到上流动。因此，在使用此属性时，建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。属性一起使用，以控制元素的盒模型（包括内容、内边距和边框）如何计算其总大小。是 CSS 中的一个属性，它用于设置元素的块级尺寸（即元素的高度）。
CSS基础——2.CSS选择器
weixin_66370632的博客
04-24 862
1. 通用选择器 通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素,开发中通常使用通用选择器来清除 HTML元素中默认的内外边距
CSS简介与CSS选择器
小何代码咖啡馆
04-17 951
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
彻底去除 vxe table 边框
09-22
要彻底去除vxe table的边框，可以按照以下步骤进行设置： 1. 给table设置border-spacing属性为0px，border-collapse属性为collapse，这样可以去除默认的边框样式： ```css table { border-spacing: 0px; border-collapse: collapse; } ``` 2. 如果你的表格是隔行变色的背景，并且想要去除边框，可以使用以下css设置： ```css tbody tr:nth-child(2n) td { border: none; } tbody tr:nth-child(2n+1) td { border: none; } ``` 这样设置后，边框会被去除。 3. 如果你是使用Vue框架，并且全局引入了vxe table，可以按照以下步骤实现可编辑表格： 首先，在main.js文件中全局引入vxe table，并引入其样式文件： ```javascript import Vue from 'vue' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' Vue.use(VXETable) ``` 然后，在需要使用可编辑表格的组件中，使用vxe table提供的组件和API来实现可编辑功能。 请注意，以上步骤仅适用于vxe table的边框设置和可编辑功能。如果你有其他关于vxe table的问题，请提出，我将尽力解答。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值