使用位置：固定在桌子上

我查看了許多與此問題相關的其他執行緒，但沒有一個解決此特定問題。我使用 Excel 創建了一個作業表，然后使用 Excel 的另存為功能將其保存為網頁。Excel 會生成一些非常奇怪的 HTML 和 CSS，但這不是問題。我能夠將 CSS 檔案從 612 行減少到 58 行并實作相同的外觀和感覺。我還能夠將作業表的 HTML 檔案從 60654 行減少到 60428 行。我還能夠將作業表檔案中的字符數從 4139575 減少到 2960747。

Excel 將整個作業表保存為填充網頁正文的單個表格。另外，在創建頁面時，每個 TR 標簽都有一個高度屬性（以像素為單位）和一個樣式高度屬性（以磅為單位），每個 TD 標簽都有一個寬度屬性（以像素為單位）和一個樣式寬度屬性（以磅為單位） ）。

現在我正在嘗試將凍結窗格的 CSS 等效項添加到表格中。我嘗試過的一切都會導致頁面破裂。嘗試修復前兩行時，第一行消失，第二行丟失前兩列。當嘗試修復前兩列時，第二列的寬度減少了 50% 以上。在這兩種情況下，整個表格仍然向上/向下和向左/向右滾動。

這里是表的開頭（包括前兩列的 COL 陳述句）和第一個 TR/TD 行和第二行的第一個 TD 行（第一行的第一個 TD 跨越兩行）。

<table border=0 cellpadding=0 cellspacing=0 width=6022 style='border-collapse: collapse;table-layout:fixed;width:4512pt'>
 <col width=40 style='width:30pt'>
 <col width=286 style='width:215pt'>

 <tr height=20 style='height:15.0pt'>
  <td colspan=2 rowspan=2 height=40 class="color1 bold" width=326 style='height:30.0pt; width:245pt'>&nbsp;</td>
  <td colspan=87 class="color1 bold" width=5696 style='width:4267pt'>&nbsp;</td>
 </tr>
 <tr height=20 style='height:15.0pt'>
  <td colspan=6 height=20 class="border1 color1 bold" style='height:15.0pt'>Ranabastre</td>

這是我一直在嘗試使用的 CSS：

.posfixtop {
    position:fixed;
    top:0px;
    left:0px;
    height:40px;
    width:100%;
    }
.posfixleft {
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:326px;
    }

我知道根據 HTML5，幾乎所有使用的屬性都不是有效的 HTML。我沒有洗掉它們或替換 CSS 檔案中沒有 CSS 版本的那些，僅僅是因為它們到目前為止還沒有造成問題。

有什么我在這里想念的嗎？我想也許你不能凍結表中的列或行，但我害怕不得不創建多個表的想法。桌子很大。

編輯：再次查看 HTML，我注意到我在上面說錯了一些內容。TD 標簽沒有寬度屬性或樣式寬度屬性。COL 標簽有那些。TR標簽有高度屬性和樣式高度屬性，每行的第一個TD也有高度屬性和樣式高度屬性。

新的訊息：

我終于解決了凍結行問題。這是有效的 CSS：

thead {
    position:sticky;
    top:0;
    min-height:120px;
    height:120px;
    z-index:50;
    background-color:black;
    }

我從Freezing Row and Column in HTML Table Using CSS 中得到了幫助我想出CSS 的資訊。

I put thead tags around the rows I wanted frozen to accomplish it. Also, Excel puts a border-collapse:collapse property on the table and I found that my cell borders weren't being preserved. I found an article here on stack overflow that answered the question by stating that border-collapse:separate should be used. I changed it accordingly and the border issue was solved:

Border style do not work with sticky position element

What I still haven't accomplished is frozen columns. When I put the posfixleft class on the td's representing the first two columns (using the first visible row below the headings as a test) what I get is the cell scrolls to the top of the screen and stops,while the rest of the rows disappear behind the header rows in a vertical scroll, and they stay positioned as expected in a horizontal scroll. I had to include the background-color property in the posfixleft class to prevent the data in the row from being visible as it scrolled behind the fixed columns.

所以剩下的問題是，當它們被修復時，我如何讓前兩列消失在標題行后面？另外，我知道答案可能是我必須使用 javascript，但是是否有一個簡單的解決方案來為每一行創建 2 個單獨的 posfixleft 類？我將大表分解為小表（按行），但最長的結果表有 81 行、127 行、128 行和 222 行，不包括標題行。

uj5u.com熱心網友回復：

原來我回答了我自己的問題，所以這里是我的回答，希望將來能對其他人有所幫助。

可以在不使用 div 或 javascript 的情況下修復表中的行和列。下面是一個示例，展示了它是如何作業的。

首先，表格的 HTML 具有固定的 2 行標題和 2 列右側。其余的列和行展示了滾動能力。

<table class="fixedTable">
<col width:20 style="width:15pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<col width:80 style="width:40pt">
<thead>
<tr>
<td class="posfixleft1">&nbsp;</td>
<td class="posfixleft2">&nbsp;</td>
<td>header1</td>
<td>header2</td>
<td>header3</td>
<td>header4</td>
<td>header5</td>
<td>header6</td>
<td>header7</td>
<td>header8</td>
<td>header9</td>
</tr>
<tr>
<td class="posfixleft1">&nbsp;</td>
<td class="posfixleft2">&nbsp;</td>
<td>header1</td>
<td>header2</td>
<td>header3</td>
<td>header4</td>
<td>header5</td>
<td>header6</td>
<td>header7</td>
<td>header8</td>
<td>header9</td>
</tr>
</thead>
<tr>
<td class="posfixleft3">1</td>
<td class="posfixleft4">Item</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td class="posfixleft3">2</td>
<td class="posfixleft4">Item</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td class="posfixleft3">3</td>
<td class="posfixleft4">Item</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td class="posfixleft3">4</td>
<td class="posfixleft4">Item</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td class="posfixleft3">5</td>
<td class="posfixleft4">Item</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>

現在對于處理所有樣式和凍結窗格的 CSS：

body {
  margin-top:0;
  margin-right:0;
  margin-bottom:0;
  margin-left:0;
  }
.fixedTable {
    border-collapse:separate;
    table-layout:fixed;
    width:300px;
    height:100px;
    }
thead {
    position:sticky;
    top:0;
    min-height:40px;
    height:40px;
    z-index:50;
  color:white;
    background-color:black;
    }
.posfixleft1 {
    position:sticky;
    top:0;
    left:0;
    height:20px;
    width:20px;
    z-index:20;
  color:white;
    background-color:black;
    }
.posfixleft2 {
    position:sticky;
    top:0;
    left:20px;
    height:20px;
    width:80px;
    z-index:20;
  color:white;
    background-color:black;
    }
.posfixleft3 {
    position:sticky;
    top:0;
    left:0;
    height:20px;
    width:20px;
    z-index:20;
  color:white;
    background-color:black;
    }
.posfixleft4 {
    position:sticky;
    top:0;
    left:20px;
    height:20px;
    width:80px;
    z-index:20;
  color:white;
    background-color:black;
    }

在這里試試

我的頁面上沒有 jsfiddle 有一個問題。表格顯示為每個單元格周圍都有邊框，當您水平滾動時，左列會稍微向左移動。同樣，當垂直滾動時，表格的頂部會稍微向上移動，并且在頭部部分的最左側列中會出現一些垃圾。我試過包括一個邊界：0；fixedTable 類中的屬性，但它什么也沒做，所以我洗掉了它。同樣，我的網頁上沒有這些問題，所以我不知道 jsfiddle 做了什么不同的事情。

標籤：html css 擅长

上一篇：如何在Excel中為一系列值添加條件格式

下一篇：根據單個參考行的變化動態隱藏/取消隱藏一系列行