CODEWITHSUNDEEP
jqueryhtmlhtml-tablesticky
liop7410
liop7410

Reputation: 135

Sticky table + table thead

I have this code and I need sticky .tab1 and for .tab2 just sticky thead. I'm going to use it for more tables so I need a little bit responsive code and if it would be possible flexible(resizing) width.

I tried some codes but they were not with responsive code, flexible width or code was harder than he had to be, I think.

There is JSFiddle

<div>
Header
</div>
<table class="tab1">
    <tr>
        <td>NAME</td>
        <td>
      <input type="text" size='20'>
          <input class="button" type="submit" name="button" value="search">
        </td>
    </tr>
</table>

<table class="tab2">
    <thead>
        <tr>
            <th>one</th>
            <th>two</th>
            <th>three</th>
            <th>four</th>
            <th>five</th>
            <th>six</th>
            <th>seven</th>
        </tr>
    </thead>
    <tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr><tr>
      <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
    </tr>

</table>

any ideas?

Upvotes: 1

Views: 427

Answers (1)

Hans Dash
Hans Dash

Reputation: 761

The fabulous css sticky works best on stuff with display: block. You can fix this with a small piece of jquery, like this:

$(function() {

$('table, td, th, thead').width(function() {	
    return $(this).width();
});

$('td, th, table, thead').height(function() {	
    return $(this).height();
});

$('table, thead').css('display','block')

});
table{width:100%;}
div{padding:100px;}
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

.tab1 {
position: sticky;
top: 0px;}

.tab2 thead {
position: sticky;
top: 20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Header
</div>
<table class="tab1">
	<tr>
		<td>BAR</td>
		<td>
      <input name='bar' type="text" readonly="readonly" size='20'>
    </td>
		<td>NAME</td>
		<td>
      <input type="text" size='20'>
		  <input class="button" type="submit" name="button" value="search">
		</td>
	</tr>
</table>

<table class="tab2">
	<thead>
		<tr>
			<th>one</th>
			<th>two</th>
			<th>three</th>
			<th>four</th>
			<th>five</th>
			<th>six</th>
			<th>seven</th>
		</tr>
	</thead>
	<tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr><tr>
	  <td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td><td>abcd</td>
	</tr>

</table><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Upvotes: 1

Related Questions