如何使表格可滚动答案

【问题标题】：How do I make a table scrollable如何使表格可滚动
【发布时间】：2012-09-26 08:48:27
【问题描述】：

有没有人知道一种仅使用 html 和 css 使表格主体可滚动的普通方法？

显而易见的解决方案

tbody {
    height: 200px;
    overflow-y: scroll;
}

不工作。

这不是表格的明显用途吗？

我做错了吗？

【问题讨论】：

标签： html css css-tables

【解决方案1】：

你需要先声明一个高度，否则你的表格会根据它的内容展开。

table{
   overflow-y:scroll;
   height:100px;
   display:block;
}

编辑：澄清你的问题后，我编辑了小提琴：查看this Example 或that way。它相当hacky并且不能保证跨浏览器工作，但可能适用于您的情况。

【讨论】：

表格的thead 部分会发生什么情况？
使用display:block 会起作用，但通常不推荐使用，因为浏览器将不再将其视为表格。
示例应该可以解决这个问题link——我希望标题保持原位
@MartinKristiansen 你的意思是，你想滚动身体而头部保持固定？纯 CSS 无法实现。
@Christoph：这就是我想做的——而且看起来这正是桌子的用途——但从外观上看，我认为你是对的。

【解决方案2】：

你不能用桌子做到这一点。用 div 包裹表格，给它类似：

div.wrapper {
    overflow:hidden;
    overflow-y: scroll;
    height: 100px; // change this to desired height
}

【讨论】：

这应该可以。因为增加表格的高度会拉伸行对齐。

【解决方案3】：

您可以用父 div 包裹表格，并按照 scoota269 的建议让他可滚动：

.div_before_table {
    overflow:hidden;
    overflow-y: scroll;
    height: 500px;
}

为了保持表格标题的粘性，您可以添加fixed 类：

.th.fixed {
    top: 0;
    z-index: 2;
    position: sticky;
    background-color: white;
 }

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #ddd;
}


/* The scrollable part */

.scrollable {
  height: 150px;
  overflow-y: scroll;
  border-bottom: 1px solid #ddd;
}

th {
  position: sticky;
  background-color: white;
  z-index: 2;
  top: 0;
}

<div class="scrollable">
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</div>

【讨论】：

这不够准确。我正在使用渐变作为表头的背景颜色。使用 th 可以为表头的每一列从左到右重复颜色。
谢谢，伙计！你救了我的一天！！！ ( ͡° ͜ʖ ͡°)

【解决方案4】：

你想要这样的东西吗？

带有固定标题的纯 CSS 可滚动表格（一）

http://anaturb.net/csstips/sheader.htm

http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

【讨论】：

是的，除了我仍然必须使表格中列的宽度保持不变。我真的不想在运行前决定宽度。
如果我见过第二个解决方案，那就是破解。如果没有设置宽度标签，绝对没有保证 coloms 将与标题对齐
这里有人问过类似的问题：stackoverflow.com/questions/10838700/…
这个代码人建议在服务器端设置宽度，以防您需要动态设置它。 cssbakery.com/2010/12/…