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: show table has 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&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> 

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:

  1. i'm guessing need have set height but, if not, remove it.

  2. 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

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -