html - IE 8 中的表格无法正常工作

Question

这是我的下表，它在 IE 8 中不起作用。

问题是当我滚动表格时，第一列被修复，其余行在第一列上方滚动。这可能只存在于 IE 8 中；它在 Chrome 和 Firefox 中运行良好。

<table border=0 id="dataTable0" class='table_data' style="position:absolute; margin:0;table-layout:auto" width=100%>
   <syn:outputData outputdata="#{DocDetailsBean.paraList}" ></syn:outputData>
</table>    

这是我的 CSS 文件:

.table_data {
   background-color:#F3F3F3;
   color:#666666;
   text-align:left;
   font-family:Arial, Helvetica, sans-serif; 
   font-size:11px;
}

Answer 1

添加表格布局:固定为 的样式。没有它，将宽度应用于表格单元格将被解释​​为最小宽度(当最小宽度不存在时的结转)

我在IE8中找到了两种解决这个问题的方法。

   1)   Adding extra td element of width: 0px to tr's of thead and tbody.

IE8 demo

   2)   Adding a hidden letter to content of after pseudo selector.

tr:after{
    content: ".";
    visibility: hidden;
}

我在条件 CSS 中添加了以上内容。因为问题只出现在 IE8 中。 (我没有在IE9+测试过)

<!--[if IE 8]>
     <style>
         /* the above css code here */
     </style>
<![endif]--> 

IE8 demo

我用的是后者，因为它简单。