您现在的位置是:主页 > 建站知识 > 建站知识

自适应手机端表格(table)样式代码

admin2020-11-28建站知识人已围观

简介很多时候我们在网站后台更新内容的时候都会遇到插入表格,但是table有一个bug,就是不能兼容手机端浏览,所以所插入的表格一定要做成自适应的才能方便用户浏览,以下是我做网站

很多时候我们在网站后台更新内容的时候都会遇到插入表格,但是table有一个bug,就是不能兼容手机端浏览,所以所插入的表格一定要做成自适应的才能方便用户浏览,以下是我做网站的时候做写的代码供大家参考:

table { 
      table-layout:fixed !important; 
      width:80% !important;
      border-collapse:collapse;
      border:none;
      margin:0 auto;
}
td,th {
    width:1px;
    white-space:nowrap; /* 自适应宽度*/
    word-break:keep-all; /* 避免长单词截断,保持全部 */
    border:solid #676767 1px;
    text-align:center;
    white-space:pre-line;
    word-break:break-all !important;
    word-wrap:break-word !important;
    display:table-cell;
    vertical-align:middle !important;
    white-space: normal !important;
    height:auto;
    vertical-align:text-top;
    padding:2px 2px 0 2px;
    display: table-cell;
}


注:


由于大家都使用excel做表格,所以这里推荐一个很好用的工具可以轻松完成将已有的Excel、Word等表格内容一键转为html代码的网站,将它们复制到源码(html)模式下,就可以完成表格的转换了。。。


http://www.huanglucheng.com/table-clear/table.html 点击打开这个地址就可以使用这个工具了,是不是很方便,哈哈!


另外大家在html插入表格的时候难免会遇到合并单元格的困扰,这里也把相对应的代码贴出来给大家参考啦:


colspan:左右合并单元格的个数;


用法:colspan=”3″ 横向合并三个单元格‘。


rowspan:上下合并单元格的个数;


用法:rowspan=”3″ 垂直合并三个单元格。


很赞哦! ()

文章评论

说点什么吧
  • 全部评论(0

站长周边福利领取

标签云