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

这是我的下表，该表在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;
}

最佳答案

添加表格布局：固定为的样式。没有它，将宽度应用于表单元将被解释为最小宽度（从最小宽度不存在时开始的残留）

我在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

我使用了后者，因为它很简单。

关于html - IE 8中的表格无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21018364/