首页 > 技术分享 > H5|CSS3
收藏

table表格的初级应用技巧

06/06 18:13
大潇博客 原创文章,转载请标明出处

我们接触网站开发时可能最先遇到的就是table表格了,它代码简单,布局效果也不错,又可以实现上下居中,但是y也正因为布局太过于局限,而且搜索引擎也不太喜欢它,所以我们也就离他越来越远了,但是有些地方也是不得不用,这里我说一点table的小技巧,可能我们经常用却也不大熟悉的技巧


//定义表格的外边框

.scholarship table {

     width: 100%;

     text-align:center;

     border:1px solid #666;  //定义表格的外边框

     border-collapse:collapse;  //去掉表格中多余或者重复的边框

}

//定义表格中td的表框(内边框)

.scholarship td {

     padding:4px 0;

     border:1px solid #666;  //定义表格的内边框

}


说来说去实际上就是border-collapse:collapse;这个css属性,很实用,当我们定义了表格的外边框,又定义了表格的内边框的时候(指td的边框,不定义可能不会显示,只显示外边框),页面中的表格就会有多条,显得很难看,这时候用到这个属性,就会把重复的都去掉啦,只留下一个,这样就好看多喽。


贴一张图片大家看一下,是不是很漂亮呢!


结尾:这种方法可以用在有富文本编辑器的页面中,这样不管我们在后台怎样编辑表格,又或者从excel、word中复制表格,出来的效果都是很棒的哦,如果说加了这几种样式依旧没效果,那就在每条样式的后面加上"!important",表示这个样式最重要,强制去执行,这样就100%没问题了。

 

打赏

阅读排行

大家都在搜

博客维护不易,感谢你的肯定
扫码打赏,建议金额1-10元
  • 15601023311