CODEWITHSUNDEEP
htmlcsshtml-table
0xAX
0xAX

Reputation: 21817

Html table with first fixed row

I'm trying to make table with first fixed row. My markup is:

<table>
  <thead>
    ....
  </thead>

  <tbody>
    ...
  </tbody>
</table>

I set up overflow and max-height for tbody, but scroll doesn't occurs. It occurs if i will add display:block to the tbody, but in this way i'll get tbody with width = tableWidth / 2, how to make tbody display : block and full width?

Upvotes: 0

Views: 219

Answers (3)

SW4
SW4

Reputation: 71170

If Im right in thinking what you want to do, try the below.

Demo Fiddle

HTML

<table>
    <thead>
        <tr>
            <td>Header1</td>
            <td>Header2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </tbody>
</table>

CSS

table {
    background-color: #aaa;
    width:100%;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}
thead > tr, tbody {
    display:block;
}

Upvotes: 4

Kees Sonnema
Kees Sonnema

Reputation: 5784

You can use first-child for this:

table tr:first-child td {
    position: fixed;
    top: 0;
}

You can also use last-child.

More css features: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Upvotes: 2

jmoyson
jmoyson

Reputation: 146

Try to put the css below on the row that you want fixed :

CSS

style="position:fixed;top:0;background:#FFF;"

Example : http://jsfiddle.net/V84PE/1/

Upvotes: 2

Related Questions