如何創建一個HTML表格，第一列是固定的，下一列是水平滾動的

Question

我有一個只有兩列的表格，我希望第一列是固定的，其他列是水平滾動的。 表可以有很多行。可滾動的應該適用於所有右列作爲一個組，而不是單個列。

以下是我的表結構提前

<table> 
    <tr> 
     <th>Header 1</th> 
     <th>Header 2</th> 
    </tr> 
    <tr> 
     <td>row 1,cell 1</td> 
     <td>row 1,cell 2</td> 
    </tr> 
    <tr> 
     <td>row 2, cell 1</td> 
     <td>row 2, cell 2</td> 
    </tr> 
</table> 

感謝。

Answer 1

如果你希望誰有權列作爲一個單元，你會設置你的表如下：

<table> 
    <tr> 
     <th>Header 1</th> 
     <th>Header 2</th> 
    </tr> 
    <tr> 
      <td>row 1, cell 1</td> 
      <td rowspan="2" class="scroll">spans across as may rows as rowspan, vertically</td> 
     </tr> 
     <tr> 
      <td>row 2, cell2 </td> 
     </tr> 
</table> 

滾動，你的選擇取決於你的目標瀏覽器，如果你不關心非當前版本的IE（8之前），那麼你可以簡單地套用以下樣式高大TD：

td.scroll { 
     overflow-x: auto; 
     overflow-y: hidden; 
    } 

如果需要器。--- IE 8，那麼你會應用這種風格

overflow: auto; 

而且必須確保單元格的垂直內容不夠高，導致垂直滾動條。如果你想只針對固定witdh的第一列，

td:first-child { 
     width: 120px 
    } 

會做的伎倆。

---

編輯：

你要找的效果更難實現比我首先想到 - 它需要大量的覆蓋默認大小和表的行爲。看起來表格對內部滾動具有非常強的抵抗力，實際上如果內部內容寬於td的定義寬度，並且即使表格將比定義的寬度更寬並且overflow設置爲scroll，td將仍然擴大到適合內容。據我所知（請糾正我，如果我錯了），滾動td的唯一方法是添加max-width。另外，您想要的的固定列必須爲有一個min-width屬性設置爲它。這裏是我的實驗：

http://jsfiddle.net/thundercracker/8CUsm/19/

我不認爲這是非常流暢然而，第二列總是會延長爲在最大寬度屬性定義的寬度。

如果您試圖將此表格設置爲佈置頁面，我強烈建議您不要這樣做。雖然它相當複雜，但這是一個更流暢的替代佈局;您可以嘗試更改表格中的行數和主體的寬度，並且其行爲方式相同。

http://jsfiddle.net/thundercracker/adD3E/67/

我必須歸功於這個線程與設置的一部分：

CSS - Expand float child DIV height to parent's height

我居然有種希望我是錯的 - 這創造這樣它不佈局把這麼多，所以如果任何人有一個簡單的方法做到這一點，請張貼它。

編輯：替代佈局適用於所有主流瀏覽器，並且在IE 7中只有一些小問題，我相信可以很容易地修復（雖然我已經錯了一次），所以這是非常有效的跨瀏覽器。