Table rows scroll in odoo

 

In this blog we will explain how to create table rows scroll in odoo web view so 

First : create the table as bellow
    <table class="tb_00">
        <tr class="tr_00">
            <th class="td_001">
                  <b class="th_01">
                       Date
                  </b>
            </th>
            <th class="td_002">
                  <b class="th_01">
                       Name
                  </b>
            </th>
            <th class="td_003">
                  <b class="th_01">
                        Manager
                  </b>
            </th>
            <th class="td_004">
                   <b class="th_01">
                         Description
                   </b>
            </th>
         </tr>
   </table>
   <br></br>
        <div class="scroll">
        <table class="tb_01">
            <t t-foreach="all_model_main_data" t-as="model">
                <tr class="tr_02">
                    <td class="td_01">
                        <span t-esc="model['model_date']" class="model_date_01"/>
                    </td>
                    <td class="td_02">
                        <t t-set="allowed" t-value="0"/>
                        <t t-if="request.env.user.has_group('canv_models_website.model_details_puser_r_per')">
                            <t t-set="allowed" t-value="1"/>
                        </t>
                        <t t-if="request.env.user.has_group('canv_models_website.model_details_puser_rw_per')">
                            <t t-set="allowed" t-value="1"/>
                        </t>
                        <t t-if="allowed == 1">
                            <a t-att-href="model['model_id'].get_portal_url()">
                                <span t-esc="model['model_name']" class="model_name_02"/>
                            </a>
                        </t>
                        <t t-if="allowed == 0">
                            <span t-esc="model['model_name']" class="model_name_02"/>
                        </t>
                    </td>
                    <td class="td_03">
                        <span t-esc="model['supervisor_name']" class="auct_visor_name_02"/>
                    </td>
                    <td class="td_04">
                        <span t-esc="model['description']" class="model_desc_02"/>
                    </td>
                </tr>
            </t>
        </table>
    </div>

Second : ass the css styles as bellow 

    .tb_00{
      width:100%;
    }
    .tb_01{
      width:100%;
    }
    .scroll{
      max-height: 500px;
      overflow: auto;
      margin-bottom:30px;
    }
    .tr_00{
      width: 100%;
      font-size: 17px;
    }
    .td_001{
      width: 15%;
      font-family: Amiri-Regular;
      font-size: 17px;
    }
    .td_002{
      width: 20%;
      font-family: Amiri-Regular;
      font-size: 17px;
    }
    .td_003{
      width: 20%;
      font-family: Amiri-Regular;
      font-size: 17px;
    }
    .td_004{
      width: 45%;
      font-family: Amiri-Regular;
      font-size: 17px;
    }
    .tr_01{
      width: 100%;
      font-size: 17px;
    }
    .td_01{
      width: 15%;
      font-family: Amiri-Regular;
      font-size: 17px;
    }
    .td_02{
      width: 20%;
      font-family: Amiri-Regular;
      font-size: 17px;
    }
    .td_03{
      width: 20%;
      font-family: Amiri-Regular;
      font-size: 17px;
    }
    .td_04{
      width: 45%;
      font-family: Amiri-Regular;
      font-size: 17px;
    }
    .th_01{
      font-family: Amiri-Regular;
      font-size: 20px;
    }
    .model_desc_02{
      font-family: Amiri-Regular;
      font-size: 17px;
    }
    .tr_02{
      margin-top: 5px;
      width: 100%;
    }