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