css - Match height of absolute td -


i trying setup frozen column , problem left have solve heights of other td's on same row not expand match height of absolute positioned td. since text in frozen header arbitrary, span multiple lines. if weren't absolute positioned force other td's in same row assume larger height, behavior like. since first td absolute, heights no longer linked other td's in same row.

how force other td's in same row assume larger height of first td?

http://jsfiddle.net/2wrms/5/

table {     border-collapse: separate;      width: 100%;     table-layout:fixed; } td {     margin:0;              } div.pivot-container {     width: calc(100% - 125px);     overflow-x:scroll;     margin-left:125px;     overflow-y:visible; } .headcol {     position:absolute;     width:125px;     left:20px; /*must match padding of outer element*/     top:auto; } .long {                 width: 230px;     vertical-align:top; }  <div style="padding-left:20px;"> <div class="pivot-container">     <table>         <tr>             <td class="headcol"> kjgh kj ghkj ghkj gkj g2jhfgjhfg</td>             <td class="long">qwertjklzxcvbnm</td>             <td class="long">qwertyuiofghjklzxcvbnm</td>             <td class="long">qwertyuvbnm</td>             <td class="long">qwertycvbnm</td>         </tr>         <tr>             <td class="headcol">5765765785</td>             <td class="long">qwertyuiopxcvbnm</td>             <td class="long">qwertycvbnm</td>             <td class="long">qwertycvbnm</td>             <td class="long">qwertyuiopasdnm</td>         </tr>     </table> </div> </div>

you want other rows have same height cells in first column, right? if understood correctly, need establish width of whole table using jquery, height change want too.

if want, instance, rows no taller 26px (the height of cells in first column), table's width can changed match limit iterating through rows , checking height of each, , changing width accordingly, since indicating in css rows should x height not work.

$(window).load(function() {     var cont = 0;     var control = false;     var wtable = $("table").width();     {         cont = 0;         $("tr").each(function() {             h = $(this).height();             if(h > 26) {                 cont++;                 if(cont == 1) {                     return false;                 }             }         });         if(cont == 0) {             control = true;         }         else {             wtable = wtable + 200;             $("table").width(wtable);         }     } while(!control);     $("tr").height(26); });

this way, we're telling table add 200px width every row finds taller 26px, , once there no more, stop. @ end of loop establish height 1 more time in case rows ended being shorter first column.

you can see example here, uses bit of original code (i'd recommend testing directly in browser, however, since due jsfiddle's layout not display correctly). hope helps.


Comments

Post a Comment

Popular posts from this blog

visual studio - vb.net filter binding source by time -

Image
hi there have database date/time (highlighted in red in image below) fields , formatting medium time shown below. and field type , format of log_in_time field.. i've connected database vb.net project , i'm using following code filter binding source log_in_time field of database. i'm using datetimepicker input source. note logouttime datetimepicker code.. private sub logintime_valuechanged(byval sender object, byval e system.eventargs) handles logintime.valuechanged, logintime.keypress 'filter binding source input data try '30-dec-99 default date time paymentdetailsbindingsource.filter = "log_in_time = '30-dec-99 " & logintime.text & "'" catch ex exception end try end sub the format of datetimepicker set custom format hh:mm tt problem above code not work, returns empty search result.. doing wrong appreciated.. thanks.. as per comment above, issue including more (or ...
Read more

php - SPIP: From Tag directly to an article -

i work spip , plugin called tagsphere works fine tags in spip. have tag groupe put 1 article tag. when click on tag in tagsphere send me before menu can see articles linked tag. want send me directly article without see tag menu before. here code model of thagsphere: <div id="tagsphere-#env{id_article}"> <ul> <boucle_mot(mots){id_groupe ?}> <li>[<a href="#url_mot">(#titre)</a>]</li> </boucle_mot> </ul> </div> anybody idea? if want skip tag page, have link directly article. <b_article> block prevents display tag if no article linked. <div id="tagsphere-#env{id_article}"> <ul> <boucle_mot(mots){id_groupe ?}> <b_article> <li> <a<boucle_article(articles){...
Read more

jquery - isAjaxRequest always return false -

i got error message 404,'model has not been saved' following code my action controller public function actionextend($id) { $model=$this->loadmodel($id); if(yii::app()->request->isajaxrequest) { $model->todate = date('y-m-d h:i:s a',(strtotime('next month',strtotime(date('y-01-d'))))); if($model->save()) { yii::app()->end(); } else { throw new chttpexception(404,'model has not been saved'); } } } the jquery call $("#buttonextend<?php echo $this->post_row;?>").click(function(e){ $.ajax({ type: "post", url: "<?php echo yii::app()->createurl('post/extend', array('id' => $data['id'])); ?>", }); }); why not ajax call ? thank help i found response, missed } , function ...
Read more