3

我有一个表,它只有两列,我希望第一列是固定的,另一列是水平滚动的。表可以有很多行。可滚动应作为一个组应用于所有正确的列,而不是单个列。

以下是我的表结构

<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>

提前致谢。

4

1 回答 1

1

如果您希望将 who 列的权限作为一个单元格,您可以按如下方式设置表格:

<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 及之前),那么您可以简单地将以下样式应用于 tall td:

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

如果您需要适应 IE 8,那么您将应用此样式

  overflow: auto;

并且必须确保单元格的垂直内容没有高到足以导致垂直滚动条。如果您只想针对固定宽度的第一列,

   td:first-child {
         width: 120px
   }

会成功的。


编辑:

您正在寻找的效果比我最初想象的要难得多 - 覆盖表的默认大小和行为需要很多时间。看起来表格对内部滚动有很强的抵抗力,事实上如果内部内容比定义的宽度宽 td,即使表格比定义的宽度更宽并且overflow设置为scrolltd仍然会扩展到以适应内容。据我所知(如果我错了,请纠正我),制作td卷轴的唯一方法是添加一个max-width. 此外,您想要的 fixed with 列必须设置一个min-width属性。这是我的实验:

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

我认为这不是很流畅,但是第二列将始终扩展到 max-width 属性中定义的宽度。

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

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

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

CSS - 将浮动子 DIV 高度扩展到父高度

我实际上有点希望我错了——创建这样的布局不需要这么多,所以如果有人有更简单的方法,请发布。

编辑:替代布局适用于所有主要浏览器,并且在 IE 7 中只有一些小问题,我认为可以轻松修复(尽管我已经错了一次),所以这是非常有效的跨浏览器。

于 2012-08-05T15:14:29.830 回答