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

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

admin2019-09-30建站知识人已围观

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

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

table { 
      table-layout: fixed !important; 
      width: 100% !important;
	  border-collapse:collapse;
	  border:none;
	  font-size:0.23rem;
}


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

站长周边福利领取

标签云