html - Table Header with fixed header without using div -


i want table header fixed width without using div tag outside table. need solution in need change css file only. have tried putting table in side div style:

width:100%;overflow-x:scroll

and on minimizing browser's height , width, working fine.

but not want. want change in css style only, avoid change in jsp files in project

psb code:

css

h3 {     font: bold 1.2em verdana, helvetica, arial, sans-serif;     background: #b7bbd6;     padding: 5px;     margin: 10px 0 0 0;     clear: both; } .list {     float: left;     width: 100%;     color: #000099;     border: 1px solid #dedfde;     margin: 0 0 15px 0;     overflow-x: scroll } .list th, .list td {     vertical-align: top;     border: 1px solid #b7bbd6 } .even {     background: #f1f1f1 } /*.odd {background: #f1f1f1}*/ .odd {     background: #fff }

html

<h3>test table</h3>  <table class="list">         <tr>             <th>a</th>             <th>b</th>             <th>c</th>             <th>d</th>             <th>e</th>             <th>f</th>             <th>g</th>             <th>h</th>             <th>i</th>         </tr>         <tr class="odd">             <td>98052826</a></td>             <td>company</td>             <td>asdfsafdsa</td>             <td>asdfsadf</td>             <td>asdfsafs</td>             <td>sadfsaf</td>             <td>1234</td>             <td>asfsdf</td>             <td>asfsafdf</td>         </tr>         <tr class="even">             <td>234568992</a></td>             <td>private</td>             <td>asfsdfaf</td>             <td>asfsaf</td>             <td>safsdafsdf</td>             <td>some address</td>             <td>3344</td>             <td>&safsdafsda</td>             <td>sadfsaddfdaf</td>         </tr> <table>

please suggest??

set following css stylesheet:

table{width: 100%;table-layout: fixed;}

edit

if use jquery, easy:

$(document).ready(function(){ /*define table class place class here instead of 'table'*/    var tablewidth =  $('table').width();    /*define h3 class place class here instead of 'h3'*/     $('h3').css('width',tablewidth - 10); });

demo


Comments

Post a Comment

Popular posts from this blog

matlab - Deleting rows with specific rules -

i got 20*3 cell array , need delete rows contains "137", "2" , "n:t" origin data: 't' '' '' 'np(*)' '' '' [ 137] '' '' [ 2] '' '' 'are' 'and' 'np(fcc_a1#1)' '' '' '1:t' [ 1200] [0.7052] '' [1.2051e+03] [0.7076] '' 'are' 'and' 'np(fcc_a1#3)' '' '' '2:t' [ 1200] [0.0673] '' [1.2051e+03] [0.0671] '' 'are' 'and' 'np(m23c6)' '' '' '3:t' [ 1200] [0.227...
Read more

php - MySQLi multi_query results for later use -

i using mysqli multi_query work several select statemets @ time. know how handle results, able use them later in code. example: <?php //connection stuff $query = "select name, surname database1;"; $query.= "select car, year, type database2 carid='1';"; $query.= "select product, price database3;"; if ($mysqli->multi_query($query)) { if($result = $mysqli->store_result()) { while($row = $result->fetch_row()) { --> here? } } } ?> <html> <div id='persona'> <?php foreach() { --> print name + surname } ?> </div> <div id='cars'> <?php foreach() { --> print car + year + type } ?> </div> <div id='product'> <?php foreach() { --> print product + price } ?> </div> </html> one more thing, prepared statements not possible when using multiple_query, right? there no benefit in putting unrelated queries in 1 multi ...
Read more