-1

This issue has appeared many times. I want the table's title to be fixed when I scroll down, how can I do that? My code for the table looks like this

<table class="specifictableheight table table-striped">
<h3>TEST</h3>
<thead>
<tr>
<th>Places</th>
<th>Hits</th>
</tr>
</thead>
<tbody>
<?php
foreach ($top3overRestaruants as $key => $value)
{
?>
<tr class="<?= $isactive ? 'alert-success' : ''; ?>">
<td><?= $key ?></td>

<td><?= $value ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Zaz
  • 1,074
  • 3
  • 17
  • 29
  • possible duplicate of [How to make a table, which is wider than screen size, scrollable and keep header row fixed?](http://stackoverflow.com/questions/2632191/how-to-make-a-table-which-is-wider-than-screen-size-scrollable-and-keep-header) – Gordon Feb 10 '13 at 10:58
  • please tell what exactly you want to achieve ? – NullPoiиteя Feb 10 '13 at 10:58
  • 1
    I knew what he want, he need to fix the title row while scrolling down to the page like header in excel –  Feb 10 '13 at 11:03
  • @Nullpointer: Try to read my question before you ask about what I'm trying to achieve: As stated in my question, I want the table's title to be fixed when I scroll down. – Zaz Feb 10 '13 at 11:04
  • @Zaz you need to learn some css – NullPoiиteя Feb 10 '13 at 11:09
  • 1
    @NullPointer: i am trying. But could not figure out how fix my problem. Therefore, i am seeking help here. If you do not want to help, then ignore my question – Zaz Feb 10 '13 at 11:13
  • This is not php issue that is why your question is down voted. What you assume as table's title,

    TEST

    this maybe?     – Develoger Feb 10 '13 at 11:45

2 Answers2

0

Here you go.

HTML:

<div class="wrapper">
    <table class="specifictableheight table table-striped">
        <h3 class="table_title">TEST</h3>
        <br />
        <thead>
            <tr class="tr_first">
                <th>Places</th>
                <th>Hits</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

.table_title {
    position: fixed;
    background: #000;
    color: #fff;
}

.tr_first {
    top: 150px;
    position: relative;
}

.wrapper {
    height: 150px;
    overflow: scroll;
}

Demo on jsfiddle: http://jsfiddle.net/q2jRu/

Develoger
  • 3,950
  • 2
  • 24
  • 38
0

Simple:please first make separate div for head and give id for that div e.i Then make in css rule #head{position:fixed;} Now solve your problem.

B M Jawahar
  • 1
  • 1