how scroll table and fix head in top

Question

1.00/5 (1 vote)

See more:

i create table and fix head and body but i can't scroll it with this css :

CSS

.t1 tbody {
          height: 100px;
          overflow: auto;
      }

      .t1 thead > tr, tbody {
          display: block;
      }

so i find this link : http://jsbin.com/bipusabici/edit?html,output
it's work great but my problem is that structure of table is different of normal table with thead and tbody.
it's use this structure :

HTML

<div id="tHeadContainer">
          <table  >
              <tr>
                  <td>Name</td>
                  <td>Operator</td>
                  <td>Began operation</td>
                  <td>Tonnage</td>
                  <td>Status</td>
              </tr>
          </table>
      </div><!-- tHeadContainer -->

HTML

<div id="tBodyContainer">
           <table  >
               <tr>
                   <td>Seabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaourne Sun</td>
                   <td>Seabourn Cruise Line</td>
                    ....

this declare head as separate table and body as separate table too with it's self div

but in normal way of table structure like below one it's use thead and tbody NOT separate table . look it :

HTML

 <table>
  <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
      <td>Sum</td>
      <td>$180</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
  </tbody>
</table>

this is my fiddle and i want scroll it with this normal table structure: http://jsfiddle.net/snicee/46jzhs94/3/

Posted 9-Sep-15 20:25pm

snicee

Updated 9-Sep-15 20:56pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-09-09T20:44:00

Solution 1

The question makes little sense. The example you show in first link is perfectly correct. Your idea that the table structure with thead and tbody elements is "normal" and the one without those element is not "normal" is totally baseless and is nothing but your fantasy.

One of the purposes of these elements is independent scrolling of the table body, which is already solved in the sample you referenced. However, there is some point of using these elements, because scrolling might not be the only purpose of such table design. Please see: http://www.w3schools.com/tags/tag_tbody.asp[^].

So, this might be the solution you are looking for: http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody[^].

—SA

Posted 9-Sep-15 20:44pm

Sergey Alexandrovich Kryukov

Comments

snicee 10-Sep-15 2:56am

please look my question i improve it

Sergey Alexandrovich Kryukov 10-Sep-15 3:06am

Great, but first look at my answer and tell me if it solves your problem or not; if not, please tell me why.
(Oh yes, your clarification is what I understood in first place; this is exactly how I understood you. Thank you anyway.)
—SA

snicee 10-Sep-15 3:24am

your help is fine but not worked on me because
when i add this css to my code (second link) it's break my table you can try it

table thead tr{
display: block;
}

please help me in writing code i need it
please add your code in my fiddle and show me how i fix it .thanks

Sergey Alexandrovich Kryukov 10-Sep-15 3:28am

I didn't try it yet, but I want to understand why not using the code shown in my last link exactly as the author of this article does?
—SA

snicee 10-Sep-15 4:32am

i try it but it's doesn't worked.
please try it in fiddle for me and give me solution pleaseeee