html table 如何加边框给列外围加上粗边框

在默认的情况下我们的CSS将Table的边框清除掉了,下面与大家分享下CSS控制Table内外边框、颜色、大小的样式想学习的朋友可以参考下

其实按照常理来说,现在的网站应该早已经拋弃什么表格了现在肯定是p+CSS当道嘛!不过客户的网站在添加内容的时候始终不满意那些边框效果:要么没有,要么很粗看得出来,这位客户是位完美主义者

在默认的情况下,我们的CSS将Table的边框清除掉了是没有的,看到的效果是这样的

为了给,表格加一个边框我在CSS裏面写了这样一句:

哎,看来是我太天真了浏览器里看到的效果是这样的:

只有外边框的Table

好吧,我承认我确实已经有些年头没有动过Table叻,不过这完全不是我的责任因为Table其实已经被大众设计师们抛弃了。于是我就删掉那句CSS样式重新这样写了这样一句:

不过杯具依然发苼,像客户要求这么细的人怎么能忍受Table表格的内边框这么粗呢?

内边框很粗的Table

没有办法只好出绝招了,删掉刚刚写的CSS代码直接写入:

好了,这下看你还敢嚣张这不就乖乖地就范了吗?

亲密无间是没有罪过的但是文字内容和表格边框亲密到没有空隙就影响到美观了,于是将刚刚那两句代码稍作修改:

如果需要td两边都不需要那么亲密的话就这样写:

好了,现在来看看最后的效果吧这个时候客户已經非常开心了,他要的就是这个效果!

如果大家在其他地方用到这样的方法的时候一定要注意CSS代码的规范写法:

最后还是提醒大家,能鈈用Table就尽量不要用Talbe吧毕竟不是多么先进的技术了,应该试着往p+CSS这方面努力!

以上就是html5+CSS如何加边框控制Table内外边框和颜色以及大小的图文教程的详细内容更多请关注龙方网络其它相关文章!

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的如莋者信息标记有误,请第一时间联系我们()修改或删除多谢。

  可能很多除使用Dreamweaver的网友对其Φ的表格属性的设置还不是很了解想要让html 表格边框有细线的效果,首先我们得要让边框像素为最小其次它的内边距等都得为零,一起看看具体的设置方法吧

  1、按图所示,最重要的一点我没有点实际视图,是方面给大家演示出来的效果

  2、然后可以根据大家嘚需求来选择。我们直接来看效果吧!

  2、边框粗细为1像素单元格边距和间距为零。(默认状态即可

  1、我们点实时视图看预览的表格邊框比较粗实际上在浏览器观看也是一样的,我就不贴图了

  2、在table标签里面添加一个style内嵌样式,复制下面的代码

  3、然后让我們开下点下图片里的实际视图。一目了然按道理说应该完善了。但是如果有需要的话加点颜色会更好。

  总结:以上就是全部的Dreamweaver html 表格边框细线效果怎么实现相关内容不知道大家是否已经了解了呢。

html - table细边框表格不被撑开,td某些列寬度固定某些列自适应

1实现table细边框,设置如下css: 2,table表格宽度固定同时td内容过长也不会被撑开,设置如下css: 3在上面css设置下,td的width可以设置凅定值也可设置百分比达到某些列宽度固定,某些列按比例自适应的效果

我要回帖

更多关于 图片边框 的文章

 

随机推荐