0

I need a simple solution. I want create an table with a fixed/frozen the left side in the blue frame in the image and a scrollable body.

I need a simple solution. I want create an table with a fixed/frozen the left side in the blue frame in the image and a scrollable body.

Link image

Below is my code to draw the table

<table v-if="Object.keys(this.aum).length" class="table table-sm table-responsive border">
              <thead>
                <tr class="text-decoration-underline">
                  <th colspan="3"></th>
                  <th colspan="5">
                    <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
                      Tuần 39 (19/9- 25/9)
                    </router-link>
                  </th>
                  <th colspan="5">
                    <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
                      Tuần 38 (12/9- 18/9)
                    </router-link>
                  </th>
                  <th colspan="5">
                    <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
                      Tuần 37 (5/9- 11/9)
                    </router-link>
                  </th>
                  <th colspan="5">
                    <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
                      Tuần 36 (1/9 - 4/9)
                    </router-link>
                  </th>
                </tr>
                <tr>
                  <th colspan="3"></th>
                  <template v-for="(n, i) in 4">
                    <th :class="{ 'bg-body-light': !i }">Nạp</th>
                    <th :class="{ 'bg-body-light': !i }">Rút</th>
                    <th :class="{ 'bg-body-light': !i }">AuM</th>
                    <th :class="{ 'bg-body-light': !i }">AuM lũy kế</th>
                    <th :class="{ 'bg-body-light': !i }">% nắm giữ</th>
                  </template>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="3" class="fw-bold">Tổng</td>
                  <template v-for="(n, i) in 4">
                    <td :class="{ 'bg-body-light': !i }">123</td>
                    <td :class="{ 'bg-body-light': !i }">456</td>
                    <td :class="{ 'bg-body-light': !i }">789</td>
                    <td :class="{ 'bg-body-light': !i }">123</td>
                    <td :class="{ 'bg-body-light': !i }">456</td>
                  </template>
                </tr>
                <tr v-for="(item, key) in aum" :key="key + '-aum'">
                  <td class="text-decoration-underline" colspan="3">
                    <router-link :to="{ path: '/real-estate-report/aum-detail', props: { filterType: 'product' } }">
                      {{ key }}
                    </router-link>
                  </td>
                  <template v-for="(n, i) in 4">
                    <td :class="{ 'bg-body-light': !i }">{{ item["old_user"]["deposit"] }}<span class="text-success">(+5%)</span></td>
                    <td :class="{ 'bg-body-light': !i }">{{ item["old_user"]["withdraw"] }}<span class="text-danger">(-5%)</span></td>
                    <td :class="{ 'bg-body-light': !i }">123</td>
                    <td :class="{ 'bg-body-light': !i }">456</td>
                    <td :class="{ 'bg-body-light': !i }">789</td>
                  </template>
                </tr>
              </tbody>
            </table>
Minh Chau
  • 1
  • 1
  • Please create a runnable snippet see https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Oct 15 '22 at 05:23
  • 2
    Does this answer your question? [How do I create an HTML table with a fixed/frozen left column and a scrollable body?](https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b) – Kapcash Oct 15 '22 at 09:01
  • There is also this which will simply allow both column headers and row headers to be fixed (actually sticky) [Sticky table header inside overflow-x div with 100% width](https://stackoverflow.com/questions/63531126/sticky-table-header-inside-overflow-x-div-with-100-width/73936569#73936569) – petern0691 Oct 15 '22 at 11:17

0 Answers0