position属性和border-collpase属性

1.border-collapse属性

   该属性表示折叠边框。是设置表格的行<tr>或<td>之间是否留有距离的样式。有3个默认值:separate|collapse|inherit

   separate:默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

   collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

   inherit:规定应该从父元素继承 border-collapse 属性的值。


   注意:当属性值为collapse时,如果对表格设置了这个属性,那么表格自带的border=“”属性和cellspacing=“”属性将被忽略。


2.position属性

  该属性用于为元素定位。有4个默认值。position:relative | absolute | static | fixed

  static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
  relative(相对定位):对象不可层叠、不脱离文档流,参考自身静态位置通过top,bottom,left,right 定位,并且可以通过z-index进行层次分级。

  absolute(绝对定位):脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
  fixed(固定定位):这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。


   注意:该属性在火狐浏览器中对表格<td>进行定位时失效,在其他浏览器中正常。

         因为在火狐中position:relative;要与display属性联用才能生效。

         解决方案:1.使用position属性时同时指定display属性。

                   2.去掉<td>的定位,为<td>中的内容加一个<div>,在<div>中设置定位(推荐使用)。

你可能感兴趣的:(css,border-collapse)