Question

假设我有一个包含三列的表，我想保留仅为第三列的水平滚动条。有可能吗？

Answer 1

你可以使用overflow-x。

像这样：

＆＃13;

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
}

td {
    border: 1px solid black;
    overflow: hidden;
    width: 100px;
}

td:nth-child(3)
{
  overflow-x: scroll;
}

＆＃13;

<table>
   <tr>
    <td>aaaaaaaaaa</td>
    <td>bbbbbbbbbb</td>
    <td>cccccccccccccccccccccccccccccccccccccccccccccccc</td>
   </tr>
</table>

＆＃13;

Answer 2

是的，结合了css位和bobs ......

仅限命名的单元格滚动

<table class='a-table'>
<tr><th>One</th><th>Two</th><th>Three</th></tr>

<tr><td>One</td><td>Two</td><td class='different'>Three-million-one-hundred-and-sixty-eight sausages marched in unison</td></tr>

</table>

通过这个特定示例，我将列指定为特定类，因为我们似乎希望一列的行为与其他列不同。

我还为单元格设置了一个固定宽度，只是为了使这个工作在示例中，并添加white-space: nowrap;以强制内容水平扩展，而不是包装到新行的默认行为防止滚动

.a-table {
  border: 1px solid #555;
}
.a-table td {
  max-width: 100px;
  border: 1px solid #ccc;
}

.different {
  overflow-x: scroll;
  white-space: nowrap;
}

如果您只想显示滚动条 >

，请随意使用overflow: auto代替scroll。

值得注意的是，其他答案之一使用overflow: hidden，如果您的任何其他单元格的内容超出设置宽度，则可能会出现不需要的行为，而此示例将正常换行。

小提琴：

https://jsfiddle.net/xpfz8ho4/

滚动列中的每个单元格

对于多行表，此解决方案还将强制执行整个列的行为：

CSS：

.a-table { border: 1px solid #555; } .a-table td { max-width: 100px; border: 1px solid #ccc; } .a-table td:nth-child(3) { overflow-x: scroll; white-space: nowrap; }

HTML：

<table class='a-table'> <tr><th>One</th><th>Two</th><th>Three</th></tr> <tr><td>One</td><td>Two</td><td>Three-million-one-hundred-and-sixty-eight sausages marched in unison</td></tr> <tr><td>One</td><td>Two</td><td>Three-million-one-hundred-and-sixty-eight sausages marched in unison</td></tr> </table>

示例小提琴： https://jsfiddle.net/w9a1kcmt/

滚动整栏

这是可能的，但有点棘手。

为此，我将我的桌子放在div中，我称之为 tableinside 。我还将我的固定（非scolling）列声明为 fixed

<div class='tableinside'> <table class='a-table'> <tr><th class='fixed'>One</th><th class='fixed'>Two</th><th>Three</th></tr> <tr><td class='fixed'>One</td><td class='fixed'>Two</td><td>Three-million-one-hundred-and-sixty-eight sausages marched in unison</td></tr> <tr><td class='fixed'>One</td><td class='fixed'>Two</td><td>Three-million-one-hundred-and-sixty-eight sausages marched in unison</td></tr> </table> </div>

现在，CSS进来了。实际上，我们要将静态列移到<div>之外，这意味着只有整个第三列实际位于div中。

这意味着我们需要使div的margin-left等于所有静态列的宽度之和，在这种情况下为100px，对5px的边距进行一些调整，因此总共110px 。然后，我们将对每个静态列进行相同的调整：

.a-table td, th { border: 1px solid #ccc; white-space: nowrap; } .tableinside { width: 300px; overflow-x:scroll; margin-left:110px; } .fixed { position:absolute; width:50px; left:10px; top:auto; } .fixed:nth-child(2) { margin-left: 55px; }

这就像这个https://jsfiddle.net/ruttgj79/
一样
当然，您必须对CSS进行一些整理，但这是让这个概念发挥作用的一种方式。

如何仅为表中的一个特定列保留horizantal滚动条？

2 个答案: