HTML CSS表格在表格底部而不是顶部显示行

我正在尝试完成对动态生成的表的格式化。在最后一页上，如果由于填充表格所需的行数少于表格所需的行数而导致表格稀疏，则这些行将显示在表格空间的底部，而不是顶部。我试图纠正这个错误，但没有成功。如何在顶部显示这些行

这似乎无关紧要，但该表是由will_paginate Ruby gem构建的。我说这无关紧要，因为当我看HTML时，它只是一个表。没有什么能让这一切发生。表格大小的格式设置为显示10行。如果只有3行，它们将如您所期望的那样列为3行。所以，我认为这只是一个HTML/CSS格式的问题

显示的表格如下所示：

SCSS：

.feeds {
  list-style: none;
  margin: 0;
  text-align: left;
  table-layout: fixed;
  width: 700px;
  height: 250px;
  overflow: auto;
  vertical-align: top;
  li {
    overflow: auto;
    padding: 10px 0;
    border-top: 1px solid $grayLighter;
    &:last-child {
      border-bottom: 1px solid $grayLighter;
    }
  }
  table, thead, th, tr, tbody, tfoot {
    vertical-align: top;
  }
  td {
    vertical-align:top;
    height: 1ex;
    overflow-x: auto
  }
}

HTML：

    <table class="feeds">
      <tbody><tr>
        <th id="url_cell"><a class="sortfield asc" href="/feeds?commit=Search&amp;direction=desc&amp;search=&amp;sort=feed_url&amp;utf8=%E2%9C%93">URL</a></th>
        <th><a href="/feeds?commit=Search&amp;direction=asc&amp;search=&amp;sort=feed_etag&amp;utf8=%E2%9C%93">Etag</a></th>
        <th><a href="/feeds?commit=Search&amp;direction=asc&amp;search=&amp;sort=feed_update&amp;utf8=%E2%9C%93">Update date</a></th>
      </tr>
          <tr>
            <td id="url_cell"><a href="http://www.skalith.net/rss">http://www.skalith.net/rss</a></td>
            <td id="etag_cell">RZWAFDMVHPXHWECK</td>
            <td id="update_cell">August  5, 2013</td>
          </tr>
          <tr>
            <td id="url_cell"><a href="http://www.viva.name/rss">http://www.viva.name/rss</a></td>
            <td id="etag_cell">KFIEQYAUWMUHUJNY</td>
            <td id="update_cell">August  5, 2013</td>
          </tr>
    </tbody></table>

RZWAFDMHPXHweck
2013年8月5日
KFIEQYAUWMUHUJNY
2013年8月5日

标题行垂直填充空间（这是它应该做的，因为您的

表格布局

。如果使用

包装它，然后仅使用

包装表格主体，它将正确对齐。但是，由于您的

表格布局：固定

，高度为

250px

，其余行将增长以弥补差异

见：

如果表中没有完整的行集，是否可以将类添加到表中？这样可以删除高度声明

其他选择：

我猜你需要有一个设定的高度，但如果没有，你可以把它去掉

用

包装表格，并将您的高度和溢出量指定给div：

---

下面是选项2的一个示例：

您的.feeds类的高度设置决定了表的大小，因此决定了如何呈现。您可以通过删除该属性并调整大小/填充或在表后添加尾随填充来解决此问题。此外，也可以将问题标记为SCS而不是CSS，或者提供just CSS取代了SCS。添加额外的行也是一种快速解决问题的方法。我已经将标记从CSS更改为SCS三次了。我验证了它是否为SCS。它不断出现SASS…我确实需要一个固定的高度来保持页面格式的一致性。使用选项2进行这些更改非常完美。我非常感谢您在CodePen中的工作，以显示我谢谢……我的荣幸——很高兴我能帮上忙！

.wrap {
  height: 250px;
  overflow: auto;
}
table {
  /* just remove the height and overflow */
}