Как сделать последнюю строку таблицы замороженной?

#html #css

#HTML #css

Вопрос:

Я могу сделать первую строку таблицы HTML замороженной, аналогично замораживанию панелей в MS Word, но не уверен, как это сделать для последней строки в таблице.

У меня есть этот код:

 .myTable {
  overflow-y: scroll;
  height: 650px;
  display: block;
}

.table-header-col {
  position: sticky;
  top: 0px;
  background-color: #f5f6f8;
}

 <table class="myTable">
  <thead>
    <tr style="height: 55px; margin: 0px;">
      <th class="table-header-col"></th>
      <th class="table-header-col">Description </th>
      <th class="table-header-col">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>amp;nbsp;</td>
      <td>Bananas</td>
      <td>2.00</td>
    </tr>
    <tr>
      <td>amp;nbsp;</td>
      <td>Apples</td>
      <td>3.00</td>
    </tr>
    <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
    </tr>
  </tbody>
</table>

Я включил здесь только две строки для примера, но если у меня 50 строк, пользователю придется прокручивать, чтобы добраться до последней строки, которая содержит общее количество. Возможно ли сделать эту строку замороженной аналогично тому, как я замораживаю строку заголовка выше?

1. В моем примере вы не можете увидеть замораживание верхней строки, потому что строк недостаточно для прокрутки. Я действительно не хотел делать вопрос слишком длинным с 50 строками данных.

Ответ №1:

вы хотите что-то вроде этого 🙂

 .myTable {
   overflow-y: scroll;
   height: 650px;
   display: block;
}
table tbody tr:last-child{
   position: sticky;
   top: 0;
   background-color: #f5f6f8;
}

 <table class="myTable">
  <thead>
    <tr style="height: 55px; margin: 0px;">
      <th class="table-header-col"></th>
      <th class="table-header-col">Description </th>
      <th class="table-header-col">Amount</th>
    </tr>
 </thead>
 <tbody>
    <tr>
       <td>amp;nbsp;</td>
       <td>Bananas</td>
       <td>2.00</td>      
   </tr>
   <tr>
      <td>amp;nbsp;</td>
      <td>Apples</td>
      <td>3.00</td>
   </tr>
   <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>
     <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>
     <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>
     <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>   
  <tr>
      <td>amp;nbsp;</td>
      <td>Total:</td>
      <td>5.00</td>
  </tr>
  </tbody>
</table>

Ответ №2:

вы можете попробовать вот это. сработало для меня:

 table{
  width: 400px;
  position: relative;
  background: transparent;
  display: block;
  padding-bottom: 42px;
   border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

table ::-webkit-scrollbar {
  width: 0px;
}


table > thead {
  height: 30px;
  text-align: end;
  position: sticky;
  top: 0;
  display: table;
  width: 100%;
  background: green;
}
table > thead > tr{
  height: 30px;
  background-color: #009879;
    color: #ffffff;
    text-align: left;
}
table > thead > tr > th{
   text-align: end;
}

table > tbody{
  height: 200px;
  display: block;
  width: 100%;
  overflow: auto;
  background: pink;
}

table > tbody > tr{
  height: 30px;
  text-align: end;
  display: table;
  width: 100%;
}


table > thead > tr > th,
table > tbody > tr > td{

 padding: 12px 15px;

}


table > tbody > tr{
 border-bottom: 1px solid #dddddd;
}

table > tbody > tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

table > tbody > tr:last-of-type {
    border-bottom: 2px solid #009879;
}

table > tbody > tr:last-child{
position: absolute;
bottom: 0;
}

 <table>
  <thead>
    <tr>
      <th>header1</th>
      <th>header2</th>
      <th>header3</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>text1.1</td>
       <td>text1.2</td>
       <td>text1.3</td>
     </tr>
     <tr>
       <td>text2.1</td>
       <td>text2.2</td>
       <td>text2.3</td>
     </tr>
     <tr>
       <td>text3.1</td>
       <td>text3.2</td>
       <td>text3.3</td>
     </tr>
     <tr>
       <td>text4.1</td>
       <td>text4.2</td>
       <td>text4.3</td>
     </tr>
      <tr>
       <td>text5.1</td>
       <td>text5.2</td>
       <td>text5.3</td>
     </tr>
      <tr>
       <td>text6.1</td>
       <td>text6.2</td>
       <td>text6.3</td>
     </tr>
      <tr>
       <td>text7.1</td>
       <td>text7.2</td>
       <td>text7.3</td>
     </tr>
     <tr>
       <td>text8.1</td>
       <td>text8.2</td>
       <td>text8.3</td>
     </tr>
      <tr>
       <td>text9 .1</td>
       <td>text9 .2</td>
       <td>text9 .3</td>
     </tr>
  </tbody>
</table>