HTML CSS Table displays rows at bottom instead of the top of the table -
i trying finish formatting table built dynamically. on last page, when table sparse because there fewer rows needed fill table, rows displayed @ bottom of table space instead of top. i've tried correct unsuccessfully. how can display these rows @ top?
it doesn't seem matter, table built will_paginate ruby gem. doesn't matter because when @ html, it's table. there nothing in there making happen. table size formatted display 10 rows. if there 3, listed 3 rows expect. so, think html/css formatting question.
the table displays:
the 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 } }
the html:
<table class="feeds"> <tbody><tr> <th id="url_cell"><a class="sortfield asc" href="/feeds?commit=search&direction=desc&search=&sort=feed_url&utf8=%e2%9c%93">url</a></th> <th><a href="/feeds?commit=search&direction=asc&search=&sort=feed_etag&utf8=%e2%9c%93">etag</a></th> <th><a href="/feeds?commit=search&direction=asc&search=&sort=feed_update&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>
the header row filling out space vertically (this should because of table-layout
. if wrap <thead>
, wrap body of table <tbody>
align correctly. however, because have table-layout: fixed
, height: 250px
, remaining rows grow make difference.
see: http://codepen.io/chrisrockwell/pen/ggmfq
can add class table if doesn't have full set of rows? way remove height declaration.
other options:
i'm guessing need have set height but, if not, remove it.
wrap table in
<div>
, assign height , overflow div:
<div class="wrap"> <table class="feeds"></table> </div>
.wrap { height: 250px; overflow: auto; } table { /* remove height , overflow */ }
here example of option 2: http://codepen.io/chrisrockwell/pen/wpyfi
Comments
Post a Comment