HTML - 原生表格（table）在浏览器中边框宽度（border）不一致解决方案

最新推荐文章于 2024-08-12 20:02:47 发布

风轻轻~

最新推荐文章于 2024-08-12 20:02:47 发布

阅读量957

点赞数

分类专栏： # 前端基础__HTML + CSS 文章标签： html css

本文链接：https://blog.csdn.net/Jie_1997/article/details/127918390

版权

前端基础__HTML + CSS 专栏收录该内容

9 篇文章

订阅专栏

添加以下样式：

table {
  border-collapse: separate !important;
  border-spacing: 1px !important;
  background-color: #000 !important;
}
td,
th {
  background-color: #fff !important;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

风轻轻~

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

原生 table 浏览器 border 粗细不一致（谷歌90版本以后） table兼容问题

weixin_46880303的博客

09-02

2937

.formTable{ border-spacing: 1px; background-color: rgba(201,201,201,1); /*边线颜色*/ border-collapse: separate; } td ,tr{ background-color: #fff; } 谷歌更新到90版本后，border-collapse:collapse ; 属性出现问题导致，border 出现宽度不一 ![在这里插入图片描述](https://img-blog.csdni

html 打印预览跟实际不一样,打印预览和打印出来的不一样（总结自己遇到的问题和解决方法）...

weixin_30314045的博客

06-15

4365

1、打印预览和打印出来的不一样(表格里面的字出了表格)？答：我在打监理月报时，经历的一个案例，其实这是因为你设置了居中，结果呢，表格进了下一页，所以这时有可能字就出了表格，只要将此单元格选定，然后选择靠上，就OK了！2、项目符号和后面的字的距离就是和别的不一样，怎么调也不行！答：看看后面是不是一行满了，而这时就多一点点，它这行字自然会靠前些，解决办法，就是光标移至最后一个字前，然后回车。就一般齐了...

参与评论您还未登录，请先登录后发表或查看评论

html中设置表格宽度不一致,为什么我的HTML表格不符合我的CSS列宽？

weixin_30771489的博客

06-21

1228

我有一个HTML表格,我希望前几列很长.我在CSS中这样做:td.longColumn{width: 300px;}这是我的表的简化版本[ . . and a bunch more columns . . .]出于某种原因,当有很多列时,该表似乎使该列<300px.我基本上希望它保持宽度,无论如何(只是增加水平滚动条).容器,表里面,没有任何类型的最大宽度,所以我想不通为什么它挤压此列中,而...

html两个表格挨着线会变宽,为什么两个表格列宽不一样?

weixin_42518709的博客

06-17

389

两个并列的表格结构一样，但是却对不齐？input标签在td里面是不是也会影响宽度？希望能得到导致的原因和解决办法！代码如下:testbody, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input,textarea, p, blockquote, th, td,tr,thead,tbod...

table 设置colspan后，宽度样式变化

只此浮生是梦中

08-19

6255

页面刚打开点击展开 //标记colspan=2的td给了我width:40% 在收起–样式变乱每个td平分tr的宽度，所有宽度失效处理： 1，去掉width:40%, 其他td设置宽度生效 2，给最下面一行的tr 改变2个td为1个 colspan=‘2’ 的td,所有样式正常具体原理不明。 ...

html table的边框线怎么变圆角_CSS偶有所得 - table 边框加圆角踩坑

weixin_39612720的博客

02-06

1045

1.发现问题看到代码里，关于表格，大家不是很喜欢用原生的table，基本都是div来做。究其原因，大概是table的样式有时候难把控，不像直接操作div那么方便。比如：我们想做一个表格，然后希望这个表格带有边框，且最外层的边框是圆角的。2. 实践采坑ing2.1 - 【踩坑】这是什么鬼，有空隙????css 代码如下:table {border: 1px solid #d8d8d8;border-ra...

HTML画表格table边线重合问题

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

08-06

1457

掌握表格边框的处理技巧对于前端开发者来说是非常重要的，尤其是当涉及到复杂的数据展示和布局设计时。通过本文提供的各种示例和技巧，你可以灵活地调整表格边框的样式，使其满足项目的具体需求。当表格的边框设置不当时，可能会导致视觉上的混乱，尤其是在边框宽度不一致或边框颜色不同的情况下。本文将深入探讨这一问题，并提供详细的解决方案，包括 CSS 属性的使用技巧以及一些实用的代码示例。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。来调整单元格之间的间距。

原生table表格实现带边框

06-08

这个示例中，`border="1"`是HTML属性，在表格中设置边框宽度为1像素。CSS样式中，`border-collapse: collapse`设置表格边框合并，`th`和`td`分别设置表头和表格单元格的样式，其中`td`设置边框为1像素的灰色。

element-uiplus修改table组件的所有边框颜色

最新发布

11-01

如果你想要修改`element-ui`表格组件（`el-table`）的所有边框颜色，你可以通过CSS样式覆盖原生样式来实现。首先，你需要确保你已经引入了Element-UI Plus的样式文件。然后，可以使用`.el-table`的类选择器，并...

原生html+css实现表格圆角效果

weixin_44528408的博客

08-12

1093

有个需求需要用原生html+css的原生table标签实现圆角表格。有的方式圆角会很模糊，或者有毛边，查找资料+调整后实现了这个功能。

解决html中表格线条粗细不一的问题

jl15988

01-11

5821

我们再html中使用原生的table时，为了美观往往会通过改变td的border来改变表格边框的样式，但是通常会处出现边框线条粗细不一的问题，下面代码解决了该问题 table { border-collapse: separate; border-spacing: 0; border-top: 1px solid #95B8E7; border-left: 1px solid #95B8E7; } td { border: 1px solid #95B8E7;

datatables thead宽度不会随着table放大缩小而改变

u014790820的专栏

01-18

1720

在使用datatables的过程中，越来越觉得这个插件不错。但是今天我遇一个问题是，thead宽度不会随着table放大缩小而改变。这就有点伤了。在网上也找了些帖子看说设置swidth的值来更改表头，不过到了我这里也是没有效果。无意中发现老外写的一段代码，然后对比了API果然可以。现在我就把代码贴出来吧！ $('table').dataTable({

盒子边框宽度和设置的值不符的原因

qq_45852515的博客

09-12

1408

盒子边框宽度和设置的值不符的原因

ie 和谷歌浏览器在display的边框显示不一样的解决办法

weixin_33757609的博客

07-04

1422

eg1: <style> .class2{displau:block; background-color:#e4f39e;width:150px;height:150px; border:10px solid green;} </style> <div class="class2">测试</div> result: 左侧是...

谷歌浏览器更新后，缩放会使table的td边框线不一样粗

Yana1225的博客

06-28

3540

今日正常发版后，测试同事反映表格的边框线不一样粗细，我在本地没能复现，缩放也没能复现。问了下同事谷歌版本：91，自己的浏览器版本：90。试了下把自己的浏览器更新到91后复现了这种情况。在网友的启发下的解决方案：发现是border-collapse出现了问题。第一步：去掉border--collapse，改成separate 第二步：给table添加 border-spacing: 1px; background-color: #000; 第三步：去掉td的border 大功..

html浏览器边框颜色,CSS设置字体和边框颜色时Chrome和其他主流浏览器差别的问题_html/css_WEB-ITnose...

weixin_28712491的博客

06-10

284

a.toregister:link {text-decoration:none;width:90px;height:40px;font-family:"黑体" ;font-weight: bold;border:1px solid #cccccc;color:rgb(100,100,100);background-color:#d1d2d3;position:absolute;left:1348p...

CSS HTML实现后，却发现与屏幕宽度不一致，超出部分如何解决？

柠夏

04-05

4907

div宽度与屏幕的大小不一致，试了很多方法无法解决！咱们这次要实现的是宽度自适应，与屏幕大小一致，可是但整体的内容编程出来后却是”宽度超出很多，如下图：“ 相信大家都有遇到过这种类似情况，在我上网搜索了解决方法后，仍然不能解决我的超出宽度。（第一种使用：width：auto; overflow：hidden）（第二种使用：宽度：100％;填料;箱上浆：边界框;）下面是我的解决方案，首先使用一个meta标签屏幕的自适应宽度，然后加使用一个大div包裹住，使用CSS样式将屏幕宽度去掉,下面奉上代码图

android 四边border宽度不一致

lqfsharks的专栏

11-05

1471

IE8下table th和td宽度样式混乱解决办法

Jachin的博客

10-13

3129

IE8下table样式混乱 td和th无法设置宽度