如何创建一个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中只有一些小问题，我相信可以很容易地修复（虽然我已经错了一次），所以这是非常有效的跨浏览器。