Question

我有以下特殊问题。让我们从代码片段开始：

...
<td>
   <div class="scrollable">...</div>
   ...other cell content...
</td>
...

现在我希望表格渲染就好像div.scrollable不会占用任何水平空间（即div.scrollable不会推动表格的右侧），而是显示水平滚动条（在div.scrollable上，而不是在整个单元格上）如果div.scrollable比包含的单元格宽。这可以通过CSS做到吗？

谢谢！

Answer 1

使用您的基本示例，您可能需要td上的设定宽度，并使用overflow和overflow-y。 overflow-y仅限CSS3，但您未指定IE8及以下版本。

编辑抱歉，您还需要display:block;上的td

td { display: block; width: 50px; } 
.scrollable { overflow: scroll; overflow-y:hidden; }

<强>更新请参阅jsfiddle示例，注意表格上的100％宽度和固定布局..这就是为了阻止示例将水平滚动添加到视口并继续进行。 http://jsfiddle.net/MMeTe/4/

Answer 2

由于他的jsfiddle示例回答了问题，因此会转向Pricey，但是要在此处获得代码的答案，我将其附加到下面：

...
<style type="text/css>
  .mytable {
    table-layout: fixed;
  }
  .scrollable{
    overlow-y: auto;
  }
</style>
...
<table class="mytable">
 <tr>
  <td>
   <div class="scrollable">...</div>
   other content...
  </td>
 </tr>
</table>

表格单元格中的水平滚动

2 个答案: