在保持宽度的同时修复 IE11 中的 table thead答案

【问题标题】：Fix table thead in IE11 while maintaining width在保持宽度的同时修复 IE11 中的 table thead
【发布时间】：2020-11-06 01:57:44
【问题描述】：

我有一张桌子，我想修复它的标题，对于 Google Chrome、Firefox 等，我使用 position: sticky，它可以完美运行，没有任何问题。

但是在开发者的地狱（Internet Explorer 11）中，它不起作用，所以，我尝试使用position: fixed，但它丢失了thead 的宽度。我尝试使用width: 100%，但没有结果。

我尝试另一种解决方案：在th 中使用position: fixed，它可以工作，但问题是一个在一个之上，有什么解决方案吗？

【问题讨论】：

标签： css internet-explorer fixed

【解决方案1】：

由于您没有发布示例代码，因此不确定您使用的是什么确切代码。

您可以尝试参考此示例，这可能有助于解决 IE 11 浏览器的问题。

<!doctype html>
<html>
   <head>
      <style>
         table {
         border-collapse: collapse;
         width: 100%;
         }
         thead {
         text-align:left;
         display: table;
         float: left;
         width: 100%;
         }
         thead tr {
         display: table-row;
         width: 100%;
         }
         tbody {
         display: block;
         height: 120px;
         overflow: auto;
         float: left;
         width: 100%;
         }
         tbody tr {
         display: table;
         width: 100%;
         }
         tbody tr {
         height: 18px;
         }
         tbody td {
         padding:1px 8px;
         }
         th, td {
         text-align: left;
         width: 25%;
         }
      </style>
   </head>
   <body>
      <table>
         <thead>
            <tr>
               <th>head</th>
               <th>head</th>
               <th>head</th>
               <th>head</th>
               <th style="width:0px;"></th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td style="width:0px;"></td>
            </tr>
            <tr>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td style="width:0px;"></td>
            </tr>
            <tr>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td style="width:0px;"></td>
            </tr>
            <tr>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td style="width:0px;"></td>
            </tr>
            <tr>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td style="width:0px;"></td>
            </tr>
            <tr>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td style="width:0px;"></td>
            </tr>
            <tr>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td style="width:0px;"></td>
            </tr>
            <tr>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td>row</td>
               <td style="width:0px;"></td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

在 IE 11 浏览器中的输出：

如果问题仍然存在，请尝试与问题快照共享示例代码。它确实可以帮助我们更好地理解问题。我们将尝试对其进行检查并尝试提供建议。

【讨论】：