CODEWITHSUNDEEP
htmlcsshtml-table
samburg wilks
samburg wilks

Reputation: 43

Keep the first row at the top of the Table

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?

Upvotes: 1

Views: 179

Answers (3)

theking2
theking2

Reputation: 2823

There are two options.

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

  2. 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.

Upvotes: 1

Mayur Satav
Mayur Satav

Reputation: 1102

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>

Upvotes: 0

Blomqen
Blomqen

Reputation: 71

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>

Upvotes: 0

Related Questions