Keep the first row at the top of the Table

Question

How do I keep #first at the top?

    <div class="table">
        <table class="maintable">
            <tbody>
                <tr id="first">
                    <td>Hello</td>
                </tr>
                <tr>
                    <td>Hello</td>
                </tr>
                <tr>
                    <td>Hello</td>
                </tr>
                <tr>
                    <td>Hello</td>
                </tr>
                <tr>
                    <td>Hello</td>
                </tr>
                <tr>
                    <td>Hello</td>
                </tr>
                <tr>
                    <td>Hello</td>
                </tr>
                <tr>
                    <td>Hello</td>
                </tr>
            </tbody>
        </table>
    </div>

CSS Code

 .table{
    grid-row: 2/9;
    margin-right: 32px;
    margin-bottom: 32px;
    overflow: scroll;
 }
 tr{
    height: 61px;
 }
 table{
    width: 100%;
    border-collapse: collapse;
 }
 #first{
    position: fixed;
 }
 tr:nth-child(odd) {
    background-color: #fefefe;
 }
 tr:nth-child(even) {
    background-color: #fafafa;
 }

I've tried using <thead> and <th> however because my table is inside a div, which is responsive and doesn't have a set height, I've had problems.

Is there any way to do it?

Is [this](https://stackoverflow.com/q/8423768/102937) what you're asking about? — Robert Harvey, Jun 28 '20 at 16:51

theking2 · Accepted Answer · 2020-06-29T08:21:07.880

There are two options.

A html table can have multiple tbody's. Each tbody could be styled differently. Something I found out after I used a different approach.

Use a separate table for the fixed part and the variable part. I used this to have a fixed header and a scrollable content. In order to have the columns lineup I use a colgroup. If you try to do this in PHP than this function might be helpful. It creates a article section for the scrollable content. Property $colwidths is an array with widths, property field_names an array of heading labels:

 protected function write_table_header() {?>
 <header>
     <h1><?= $this-> tabletitle ?></h1>
     <table class="report-table">
             <col width="<?= implode('" /><col width="',$this->colwidths ) ?>" />
         <thead>
             <tr>
                 <th><?= implode( '</th><th>', $this-> field_names ) ?></th>
             </tr>
         </thead>
     </table>
 </header>
 <article>
     <table class="report-table">
         <col width="<?= implode('" /><col width="',$this->colwidths ) ?>" />

after which you can loop over your table content.

I didn't use your PHP code, however I inferred from your answer that I could set the header as a **separate table**. This works great. — samburg wilks, Jun 28 '20 at 20:12

score 0 · Answer 2 · answered Jun 28 '20 at 16:51

Try adding top:0; to #first. Im not sure if this is what you meant though.

.table{
    grid-row: 2/9;
    margin-right: 32px;
    margin-bottom: 32px;
    overflow: scroll;
}
tr{
    height: 61px;
}
table{
    width: 100%;
    border-collapse: collapse;
}
#first{
    position: fixed;
    top:0;
}
tr:nth-child(odd) {
    background-color: #fefefe;
}
tr:nth-child(even) {
    background-color: #fafafa;
}

<div class="table">
                        <table class="maintable">
                            <tbody>
                                <tr id="first">
                                    <td>Hello</td>
                                </tr>
                                <tr>
                                    <td>Hello</td>
                                </tr>
                                <tr>
                                    <td>Hello</td>
                                </tr>
                                <tr>
                                    <td>Hello</td>
                                </tr>
                                <tr>
                                    <td>Hello</td>
                                </tr>
                                <tr>
                                    <td>Hello</td>
                                </tr>
                                <tr>
                                    <td>Hello</td>
                                </tr>
                                <tr>
                                    <td>Hello</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

Pretty. the empty scrollbars in the content should be removed with a overflow:hidden; — theking2, Jul 07 '20 at 12:13

score 0 · Answer 3 · answered Jun 28 '20 at 16:53

I hope this responsive table will solve your, problem have a look

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Hello</th>
      <th>Hello</th>
      <th>Hello</th>
    </tr>
    <tr>
      <td>Hello</td>
      <td>Hello</td>
      <td>Hello</td>
    </tr>

  </table>
</div>

Keep the first row at the top of the Table

3 Answers3