当我使用固定在表格行上的位置时出现 Firefox 问题答案

【问题标题】：Firefox issue when I used position fixed on table row当我使用固定在表格行上的位置时出现 Firefox 问题
【发布时间】：2012-02-14 07:40:42
【问题描述】：

我需要表格的可滚动标题。所以我决定使用 postion: fixed on styles。问题是 Firefox 和 Chrome 上的宽度缩小了。它在 Mozilla 上运行良好。供您参考，我发布了我的 HTML 表格代码。

<html>
<head>
</head>
<body>
   <table width="150%">
      <thead>
         <tr>
            <th width="50%" align="left">Head 1</th>
            <th width="50%" align="left">Head 2</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
      </tbody>
      <tfoot>
         <tr><td>Foot 1</td></tr>
      </tfoot>
   </table>

</body>
</html>

【问题讨论】：

标签： html position html-table head

【解决方案1】：

这个怎么样？

 <th align="left" style="position:fixed;float:left;">Head 1</th>
 <th align="left" style="position:fixed;float:right;left:75%;">Head 2</th>

【讨论】：

我试过这个。它不是在寻找这个，滚动条是为表格而来的。我不想滚动表格，滚动条将出现在整个页面上，表格标题需要垂直和水平滚动。
注意：我的表格宽度是 150% 而不是 100%
它可以用于水平滚动。不适用于垂直滚动。
在那种情况下，也有一些关于那个的答案。看看html-table-scrolling-vertical-horizontal