精华内容
下载资源
问答
  • 代码只是两行,我却用了将近两天的时间才解决,新人一枚呀!哭哭!! 想办法去控制住当前的table表格,而... // 使表格兼容safari,不错位 width: 100%; table-layout: fixed !important; } table-layout知...

    代码只是两行,我却用了将近两天的时间才解决,新人一枚呀!哭哭!!

    想办法去控制住当前的table表格,而不是一味的使用element UI原来的ui去控制

    控制表格的body

    .el-table__body {
      // 使表格兼容safari,不错位
      width: 100%;
      table-layout: fixed !important;
    }

     

    table-layout知识点补充:

    定义和用法

    tableLayout 属性用来显示表格单元格、行、列的算法规则。

    固定表格布局:

    固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。

    在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。

    通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。

    自动表格布局:

    在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。

    此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。

    说明

    该属性指定了完成表布局时所用的布局算法。固定布局算法比较快,但是不太灵活,而自动算法比较慢,不过更能反映传统的 HTML 表。

     

    两个属性都不能少,少了还是没有解决问题,最后祝前端开发的小伙伴能开心愉快使用element UI!

    展开全文
  • 问题描述: ...我用了自己写样式的办法,来解决了这个兼容性问题。 可以满足有超多内容适合,只显示三行,多余的省略号显示,鼠标方上去以后,可以悬浮出全部内容 1、效果如下: 2、具体解决办法: 2.1

    问题描述:

    el-table加了show-overflow-tooltip这个属性以后,如果有内容过长的行信息,用苹果safari浏览器,就会出现如下情况,表格整体会变得奇奇怪怪的。
    在这里插入图片描述

    解决办法

    网上常见的一些方法,试过,但是没啥用,有的说是电脑分辨率导致的,具体原因说实话我不太清楚,有了解这个的bro,可以留言指导一下。

    我用了自己写样式的办法,来解决了这个兼容性问题。
    可以满足有超多内容适合,只显示三行,多余的省略号显示,鼠标方上去以后,可以悬浮出全部内容
    1、效果如下:
    在这里插入图片描述
    在这里插入图片描述
    2、具体解决办法:
    2.1、鼠标悬浮出现全部内容效果,建议使用el-popover,别使用那个tooltip(个人感觉不好看)
    在这里插入图片描述

        <el-table-column
            align="center"
            property="evaluate"
            label="评价"
          
          >
               <template slot-scope="scope">
    
                <!-- <el-tooltip :content="scope.row.evaluate" placement="top">
                      <p class="table2"> 
                               {{scope.row.evaluate}}   
                      </p>
    
                </el-tooltip> -->
                <el-popover
                  placement="top-start"
                  title="评价"
                  width="200"
                  trigger="hover"
                  :content="scope.row.evaluate">
                  <p class="table2" slot="reference"> 
                    {{scope.row.evaluate}}   
                  </p>
                  <!-- <el-button slot="reference">hover 激活</el-button> -->
              </el-popover>
          </template>
          </el-table-column>
    

    2.2、设置超三行省略号样式
    在这里插入图片描述

    .table2  {
      overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    }
    

    在这里插入图片描述

    展开全文
  • 昨天晚上在家写了个表格,高高兴兴来公司准备用上。。。 结果悲剧了。。。。昨晚在家用的chrome,公司的是ie6.... 发现ie6不支持tr中的border属性,郁闷啊。。。 找了下资料,发现只能如此解决之: 在table...

    昨天晚上在家写了个表格,高高兴兴来公司准备用上。。。

    结果悲剧了。。。。昨晚在家用的chrome,公司的是ie6....

    发现ie6不支持tr中的border属性,郁闷啊。。。


    找了下资料,发现只能如此解决之:

    在table里<table style="border-collapse:collapse" cellspacing="0px" >

    然后在tr里<td style="border:1px solid #000000">车牌号码:</td>

    <td style="border:1px solid #000000; border-bottom-style:hidden">XXXX:</td>


    哈哈哈哈,天无绝人之路嘛。。

    展开全文
  • 在 IE6 中,当表格单元格中的数据为空时,边框是不显示的,在IE8中是会显示的,怎样解决这个不兼容的问题呢。
  • 动态创建表格兼容

    千次阅读 2012-12-26 07:22:41
    表格在页面中虽已不是主流的布局方式,但在实际的开发过程中经常会遇到一些要动态创建表格数据的场景,如何完全兼容现在所有的浏览器是一个问题,目前我的解决方案如下,但检查在IE9下运行不兼容!!!!!!!! ...

    导语:

    表格在页面中虽已不是主流的布局方式,但在实际的开发过程中经常会遇到一些要动态创建表格数据的场景,如何完全兼容现在所有的浏览器是一个问题,目前我的解决方案如下,但检查在IE9下运行不兼容!!!!!!!!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            var json = [{ "name": "博客园", "url": "http://www.cnblogs.com" }, { "name": "搜狐", "url": "http://www.sohu.com" }, { "name": "新浪", "url": "http://www.sina.com.cn"}];
    
            window.onload = function () {
                /*//第一种方法
                var site = document.getElementById("site");
                var table = document.createElement("table");
                site.appendChild(table);
                var tbody = document.createElement("tbody");
                table.appendChild(tbody);
    
                for (var i = 0; i < json.length; i++) {
                var address = json[i];
                var tr = document.createElement("tr");
                tbody.appendChild(tr);
    
                var td1 = document.createElement("td");
                td1.innerHTML = address.name;
                tr.appendChild(td1);
    
                var td2 = document.createElement("td");
                td2.innerHTML = "<a href='" + address["url"] + "'>" + address.url + "</a>";
                tr.appendChild(td2);
                }
                */
    
                /*//第二种方法
                var site = document.getElementById("site");
                var table = document.createElement("table");
                site.appendChild(table);
    
                for (var i = 0; i < json.length; i++) {
                var address = json[i];
                var tr = table.insertRow(-1);
    
                var td = tr.insertCell(-1);
                td.innerHTML = address.name;
    
                td = tr.insertCell(-1);
                td.innerHTML = "<a href='" + address["url"] + "'>" + address.url + "</a>";
                }            
                */
    
                //绝招,粗放型创建表格
                var site = document.getElementById("site");
                var table = "<table><tbody>";
                for (var i = 0; i < json.length; i++) {
                    var address = json[i];
                    table += "<tr><td>" + address.name + "</td><td><a href='" + address["url"] + "'>" + address.url + "</a></td></tr>";
                }
                table += "</tbody></table>";
                site.innerHTML = table;
            }
        </script>
    </head>
    <body>
        <div id="site">
        </div>
    </body>
    </html>
    


    展开全文
  • 关于layui数据表格兼容ios的问题

    千次阅读 2019-08-14 20:46:55
    layui数据表格在安卓系统上可以完美运行,但是在ios系统上非常不友好,横向不自动适应并且没有了左右滑动的滚动条,解决办法如下。 判断是不是ios操作系统,如果是的话就给layui数据表格加上宽和高可以解决问题。 ...
  • 在使用固定table表头和合计行时出现了,表格错位的现象,具体解决方案: 设置一个公共的样式: .el-table__header,.el-table__body,.el-table__footer{ width: 100%; table-layout: fixed !important; } 因为...
  • 是一个轻量级的Vanilla JavaScript插件,用于创建令人惊叹的基于Web的交互式HTML表格和与其他电子表格软件兼容的电子表格。 您可以从JS数组,JSON,CSV或XSLX文件创建在线电子表格表格。 您可以从excel复制并直接...
  • 一行代码解决各种IE兼容问题

    万次阅读 2017-07-06 09:37:52
    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 前端面试秘籍,欢迎star! 在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的...
  • 是一个轻量级的Vanilla JavaScript插件,可创建与Excel或任何其他电子表格软件兼容的基于Web的惊人的交互式HTML表格和电子表格。 您可以从JS数组,JSON,CSV或XSLX文件创建在线电子表格表格。 您可以从excel复制并...
  • 最近需要在word中绘制表格,绘制完成后发现 wps不支持poi的跨列合并,百度没有找到好的解决办法。自己在office中把文档转换为doc格式之后发现wps可以正常显示word中的表格了,同时之前微信预览不到表格的问题也解决...
  • 原因 :ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列,这两个指令的实现css3中的标签: position: -webkit-sticky !important; position: sticky !important; 谷歌、火狐及-webkit-内核的浏览器均...
  • jExcel是一个轻量级的javascript插件,用于创建与Excel兼容并基于Web的交互式表格和电子表格 jExcel CE 是一个轻量级的 Vanilla JavaScript 插件,用于创建与 Excel 或任何其他电子表格软件兼容的基于 Web 的交互式 ...
  • 官方办法2.2、方法二:通过javascript查看.NET版本2.3、方法三:通过注册表查看.NET版本三、高低版本.NET兼容解决办法四、高低版本.NET兼容测试 一、描述 端游上架QQ游戏大厅,一般会要求自制一个微端下载器,可以...
  • 在 IE6 中,当表格单元格中的数据为空时,边框是不显示的,在IE8中是会显示的,怎样解决这个不兼容的问题呢。下面有一个例子,看如下代码,有两处不能显示,有一种解决办法是加个空格,可以解决但不是最理想的。其实...
  • 你肯定会说table还要解决兼容问题,你搞笑啊~~ 是的,一开始我也会这样说,但那是在只有一个table状况下,咋折腾都没问题,直到有一天。。。 先说说为什么要嵌套table,常规情况下我们用一个table就能解决问题,...
  • 这两天主要学习了两方面的内容:表格表单以及一些在IE6,7下的兼容问题。表格表单1、table 表格;thead 表格头;tbody 表格主体;tr 表格行;th 元素定义表头;td 元素定义表格单元(在一行的为并列关系,从上往下...
  • WEB前端解决浏览器兼容性问题

    千次阅读 2015-04-27 17:18:37
    FireFox:document.getElementById("idName"); ie:document.idname或者document.getElementById("idName...解决办法:统一使用document.getElementById("idName"); 2. const问题 说明:Firefox下,可以使用const关键
  • poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, int row, int fromCell, int toCell) { for (int cellIndex = fromC...
  • 这样解决浏览器不兼容问题

    千次阅读 2013-08-08 11:07:58
    浏览器兼容性问题怎么解决? 如果想解决浏览器的兼容性问题,你首先要明白在一个浏览器显示正常的代码为什么会在其他浏览器出现浏览器不兼容的问题?这是因为各个浏览器对于HTML标签或者DIV盒子模型的解析不同造成...
  • 为您提供vxe-tablevue表格解决方案下载,vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...
  • 在 IE6 中,当表格单元格中的数据为空时,边框是不显示的,在IE8中是会显示的,怎样解决这个不兼容的问题呢。下面有一个例子,看如下代码,有两处不能显示,有一种解决办法是加个空格,可以解决但不是最理想的。其实...
  • 而且poi对于生成word方面的能力确实不如他生成xsl那种表格好.其他的特点另行百度,很多文章介绍. 这也是我才解决的bug 首先这个模板里第一行是6个单元格 ,第二行第三行都是8个单元格 我们的业务是得到一个存放...
  • 使用vue-seamless-scroll循环表格数据,建议使用v-for,ul li 的形式便于操作属性,elemengt ui table可能不好处理兼容性问题及属性设置,尤其是一个页面添加多个表格及效果。 VUE: 排序 this.$refs....
  • 1、动态获取rId(兼容软件创建的表格和代码创建的表格(普通方式创建)) 2、增加读取t标签内容(兼容通过限制对滑动窗口内的行的访问来降低内存占用的方式创建的表格) Main.java import java.io.Fil
  • 使用antd中的ellispsis:true实现超出显示省略…时...解决方案:在css中加入 //兼容火狐超出显示... .ant-table-row-cell-ellipsis a{ display: block; width:100%; overflow: hidden; white-space: nowrap; -o...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,431
精华内容 22,972
关键字:

如何解决表格兼容