建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > 浏览器兼容 >

兼容浏览器的css网页细线表格设计

更新时间:2015-12-13整理编辑:建站学习网阅读:0
  细线表格如果单纯设置边框,很难保证浏览器兼容。

  常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框;并对 table 元素设置左边框和上边框,对 th 和 td 元素设置右边框和下边框。

  代码如下:
  <table>

  <tr>

  <th>table head (row1, col1)</th>

  <th>table head (row1, col2)</th>

  <th>table head (row1, col3)</th>

  </tr>

  <tr>

  <td>table data (row1, col1)</td>

  <td>table data (row1, col2)</td>

  <td>table data (row1, col3)</td>

  </tr>

  <tr>

  <td>table data (row2, col1)</td>

  <td>table data (row2, col2)</td>

  <td>table data (row2, col3)</td>

  </tr>

  </table>

  CSS:

  代码如下:
  table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;}

  th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}

  th{font-weight:bold;background:#ccc;}

本文网址:https://www.dedexuexi.com/divcss/llqjr/523.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
IE6/7/8/9中table元素align=center权重比margin:0大的实例说明
« 上一篇2015年12月13日
谷歌浏览器不支持小于12px的字体大小
2015年12月13日下一篇 »
  • 兼容各浏览器:CSS定义PNG透明效果
    0阅读
    虽然有CSS有很多方法能实现PNG图片透明效果,但在各浏览器中的兼容效果却不好,小编找到了一个能兼容各浏览器用CSS定义PNG透明效果的方法,方法如下: style .mycls{ width: 48px; height: 48px; backg
  • 图片垂直居中css写法兼容ie6
    0阅读
    头胀胀的,看不下东西做不下事,那就写朵随笔吧。 图片垂直居中,原理应该就是,其实我也不知道。 手上两种方法,异曲同工,但是都兼容ie6的。 复制代码 代码如下: div class=imgBox img src=h
  • CSS兼容性问题 && CSS HACK
    0阅读
    以前做网页的时候,只考虑 IE6 和 FF 的兼容性,公司换了,要求也高了,FF和IE 6 7 8 要全兼容了, 碰到要单独Hack IE8的。当然,用注释非常方便,只要添加相应的注释就可以解决。但问题是,为
  • chrome表单自动填充导致input文本框背景变成偏黄色问题解决
    0阅读
    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: 复制代码 代码如下: input:-webkit-
  • 完美解决IE兼容模式问题
    0阅读
    IE浏览器从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题,于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式: 复制代码 代码如
 
QQ在线咨询