Safari的表格用col预定义宽度，配合table-layout:fixed.但是单元格仍会被撑开

最新推荐文章于 2023-03-22 10:07:01 发布
转载 最新推荐文章于 2023-03-22 10:07:01 发布 · 437 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/coconutGirl/p/7903109.html

本文探讨了表格中td单元格被撑开的问题，并分享了一种解决方案：为每个单元格设置固定宽度。该问题似乎仅在初次加载时出现，且table-layout:fixed属性未生效。

解决办法：给每一个td单元格都设了一个固定的值。然后就不会被撑开了，但是不知道为什么会被撑开。而且只在初次进来会这样，很多个Tab对应很多个表格，切换tab再回到撑开的页面，就没有撑开了。

感觉是table-layout:fixed没有起效。

转载于:https://www.cnblogs.com/coconutGirl/p/7903109.html

abc589721
关注
HTML5andCSS3面试题大全
donglize521521的博客
03-08 6229
文章目录1.CSS引入(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC2.CSS选择器(1) CSS选择器种类(2)CSS选择器的优先级3.CSS伪类和伪元素4.CSS盒模型4.有哪些方式（CSS）可以隐藏页面元素？4.**em\px\rem区别？****5.块级元素水平居中的方法？** 1.CSS引入 (1)有哪些引
在牛客网答题总结的前端面试71道HTML+CSS常考题
bluedandelion的博客
05-30 4211
1、浏览器页面有哪三层构成，分别是什么，作用是什么?       构成：结构层、表示层、行为层        分别是：HTML、CSS、JavaScript        作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。2、HTML5的优点与缺点？优点：        a、网络标准统一、HTML5本身是由W3C推荐出来的；       b、多...
table-layout:fixed在Safari下的一个BUG
weixin_34252090的博客
11-01 707
为什么80%的码农都做不了架构师？>>> ...
table-layout:fixed解决table宽度失效撑开页面
菜菜的博客
12-11 2916
table在部分安卓机型里撑开了页面，解决方法： 设置表格固定布局： table{ table-layout:fixed; width: 100%; } 定义和用法 tableLayout 属性用来显示表格单元格、行、列的算法规则。 固定表格布局(fixed)： 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。 在固定表格布局中，水平布局仅取决于表...
antd table 被内容撑开，设置columns宽度失效
dongakng的博客
03-22 656
1. table table-layout去控制。2. 使用columns的render属性去控制。title: '参数',
Html设置表格撑开,【CSS】表格或div被撑开的解决办法
weixin_39939661的博客
06-21 698
摘要：后台添加内容后才发现显示的页面被撑开，导致网页极度不美观。，现在潇湘在线把平时找到的防止表格或div被撑开的好方法总结归纳一下，和大家一起分享。在我们设计网页的时候，总会遇到一些不愉快的事情，最常见的莫过于在后台添加内容后才发现显示的页面被撑开，导致网页极度不美观。以前大家基本上都是设计表格，网上自然不少对于的解决方法，如今还有div css标准设计，很少看到相关好的方法，现在潇湘在线把平时...
IE8 Firefox Chrome Safari 不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性
ion_L的博客
08-19 1841
由图可知，colgroup和col这两个标签存在严重的浏览器兼容问题，在Chrome、FireFox、Safari和ie8+等浏览器中background、width和span属性等到了良好的支持，所以建议最好不要使用。 ...
冻结列功能实现秘籍：仿Excel固定列效果（附源码下载）
冻结列功能在现代数据表格展示中具有重要作用，能够提升用户体验并增强数据可读性。本文系统阐述了冻结列功能的概念、应用场景及其在前端的实现原理，深入分析了基于HTML、CSS及JavaScript实现冻结列的核心逻辑，...
解决ElementUI中的table表格内容过多，导致行内撑开的问题。
qq_43474235的博客
08-01 7931
解决ElementUI中的table表格内容过多，导致行内撑开的问题。
解决前端ui界面使用element UI table表格不兼容safari浏览器，表格错乱的问题
qq_30405009的博客
06-05 1万+
代码只是两行，我却用了将近两天的时间才解决，新人一枚呀！哭哭！！ 想办法去控制住当前的table表格，而不是一味的使用element UI原来的ui去控制 控制表格的body .el-table__body { // 使表格兼容safari，不错位 width: 100%; table-layout: fixed !important; } table-layout知...
Element-UI在safari浏览器下table列表无法对齐的问题
sxLDWX的专栏
11-28 8558
由于Element-UI的table列表会在两个column中间添加一条能够拖动的竖线，（可能表现的不明显以至于很多人并没有发现，但是竖线是确实存在的。）在safari浏览器下这个竖线的样式无法正确渲染，所以导致了table列表的表头与内容存在几个px的偏差。我寻找了很久，也尝试与Element-UI官方团队进行沟通，希望官方能够修复这个bug。但是并没有生效，bug依旧存在。下面给出我的解决方案：
el-element布局控件layout中的el-row和el-col
m0_50618406的博客
11-13 4934
在使用element组件中，layout布局控件能够很好的帮我们对页面进行布局。其中最常用到的就是栅格基础布局。 如下所示 <el-row :gutter='40'> <el-col :xs="12" :sm="12" :lg="6">第一个</el-col> </el-row> 对于el-row，其常用属性和方法下表 参数 说明 可选值 gutter 栅格间距 type 布局模式，可选flex gutter 栅格间距 对
Safari浏览器下colgroup失效导致表格列宽均分
qq_40684123的博客
11-19 1129
Safari浏览器下colgroup失效导致表格列宽均分表现原因解决 表现 使用原生tabel标签写表格，由于需要对表头做特殊处理，所以采用两个表格组装的方式写，表头也是用单独的table标签写的。 发现在Safari浏览器中（包括移动端和PC端），表头被均分了，宽度不是代码里设置的宽度，但是表格主体部分没有被均分，是设好的宽度，就导致表头和主体部分错位，对不上。但是在Chrome，Firefox，IE，edge上都很正常，并无错位 原因 查看colgroup，发现表头和body部分列宽设置是一模一样的，
table-layout: fixed失效问题
qq_42923368的博客
10-11 2133
固定表格布局： fixed 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。 通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。 对表格设置table-layout:fixed属性以后，如果表格的第一行tr中的td设置过单元格合并，后面tr中的td无论如何设置宽度都没有任何效果 这里因为第一行是标题，使用了colspan合并了单元格，导致了table-layout: fixe
Safari上的table宽度问题
qq_19306197的博客
05-05 2177
参考地址：http://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari 最近，遇到一个问题：在iPhone手机上使用浏览器（Safari或chrome）打开一个用表格的网站，如果表格的字段太多，浏览器会自动将表格撑开，不会出现左右滚动条，这导致整个网页的宽度改变，经过
QT中layoutstretch属性配置，控件按比例扩大缩小
热门推荐
董盼山的专栏
11-19 5万+
现在相对一个horizontalLayout中的连个QTextEdit控件按2:3的比例扩大，找了很多资料没有找到那个参数可以配置，后来去一个国外的网站去找，终于找到了配置方法。 具体方法： 把horizontalLayout中的layoutstretch属性设置为2,3即可，layoutstretch属性的意思是horizontalLayout里面的两个控件按2：3的宽度显示。 同理如果h
table {table-layout:fixed} 设置了这个属性了之后，你就可以css设置表格的宽度了
zhengbingmei的博客
06-19 7700
table {table-layout:fixed} 设置了这个属性了之后，你就可以css设置表格的宽度了
display: table; table-layout: fixed; border-collapse: collapse; overflow-x: auto; word-break: keep-all; border: 2rpx solid #EEF0F5;.
最新发布
09-19
它使得元素表现为表格，可以配合其他表格相关的显示属性（如`table-row`, `table-cell`等）使用。 2. `table-layout: fixed;`：设置表格的布局算法为固定布局。在这种布局下，表格的宽度由表格宽度、列宽度或第一行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值