Question

我有一个表只有两列，我希望第一列固定，其他列可水平滚动。表可以有很多行。 scrollable应作为一个组应用于所有右列，而不是单个列。

以下是我的表结构

<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的定义宽度宽，即使表格比定义的宽度宽{{1} }设置为overflow，scroll仍将展开以适合内容。据我所知（如果我错了请纠正我），进行td滚动的唯一方法是添加td。此外，您希望的固定列必须设置max-width属性。这是我的实验：

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

我不认为它非常流畅，但是第二列将始终延伸到max-width属性中定义的宽度。

如果您尝试将此表设置为布局页面，我强烈建议不要这样做。虽然它相当复杂，但这里有一个更流畅的替代布局;您可以尝试更改表格中的行数和正文的宽度，它的行为方式也相同。

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

我必须将此线程归功于该设置的一部分：

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

我实际上希望我错了 - 而且创建这样的布局并不需要这么多，所以如果有人有更简单的方法，请发布它。

编辑：替代布局适用于所有主流浏览器，并且在IE 7中只有一些我认为可以轻松修复的小问题（虽然我已经错了一次），所以这是非常有效的跨浏览器。

如何创建HTML表，第一列是固定的，下一列是水平可滚动的

1 个答案: