2

我正在尝试完成对动态构建的表格的格式化。在最后一页，当表格稀疏时，因为填充表格所需的行数少于该表格，这些行将显示在表空间的底部而不是顶部。我试图纠正这个没有成功。如何在顶部显示这些行？

这似乎无关紧要，但该表是由 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>
4

1 回答 1

5

标题行垂直填充空间（这是它应该做的，因为你的table-layout。如果你用它包裹它，<thead>然后只用<tbody>它包裹表格的主体，它将正确对齐。但是，因为你有table-layout: fixed, with height: 250px,剩余的行将增长以弥补差异。

见：http ://codepen.io/chrisrockwell/pen/gGmFq

如果没有完整的行集，您可以向表中添加一个类吗？这样您就可以删除高度声明。

其他选项：

  1. 我猜你需要有一个设定的高度，但如果没有，你可以删除它。

  2. 将表格包裹在 a 中<div>并将您的高度和溢出分配给 div：

<div class="wrap">
  <table class="feeds"></table>
</div>

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

这是选项 2 的示例： http: //codepen.io/chrisrockwell/pen/wpyfI

于 2013-08-08T02:51:19.783 回答