Html Question posted in
Some basic documentation can be found here.

Html – Fixed table header widths break if there is at least one table header row above them

I’m using the table component from the Vuetify framework. I’m building a dynamic table, based on a configuration. The fixed table headers are dynamic and might be nested inside a parent group or might have a rowspan greater than 1.

This code here ( playground link ) shows a table as I would expect it

<template>
  <v-app>
    <v-main>
      <v-table fixed-header>
        <thead>
          <tr>
            <!-- column width coming from configuration file -->
            <th
              :colspan="1"
              :rowspan="1"
              :style="{ width: `${300}px` || 'auto' }"
            >
              Col 1
            </th>
            <!-- column width coming from configuration file -->
            <th
              :colspan="1"
              :rowspan="1"
              :style="{ width: `${20}px` || 'auto' }"
            >
              Col 2
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td :rowspan="2">Col 1, Rowspan 2</td>
            <td :rowspan="1">Col 2, Rowspan 1</td>
          </tr>
          <tr>
            <td :rowspan="1" class="d-none">Col 1, Rowspan 1</td>
            <td :rowspan="1">Col 2, Rowspan 1</td>
          </tr>
        </tbody>
      </v-table>
    </v-main>
  </v-app>
</template>

<style>
  .v-table__wrapper table {
    table-layout: fixed;
    width: 0 !important;
  }

  .v-table {
    flex: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
</style>

The output looks fine

enter image description here

but whenever the configuration contains header groups the widths break. When I add the following table header row above the other one ( playground link )

      <tr>
        <!-- column width is the sum of child column widths -->
        <th
          :colspan="2"
          :rowspan="1"
          :style="{ width: `${320}px` || 'auto' }"
        >
          Group Col
        </th>
      </tr>

I get this output

enter image description here

although I would expect the first column to have a width of 300 and the second one to have a width of 20.

Sidenote: I’m facing less issues when reproducing it with plain HTML

How can I fix that?

Tags:

2

Answers


  1. 0

    Use <colgrup> to size the columns: (playground link)

     <v-table fixed-header>
        <colgroup>
          <col :style="{ width: `${300}px` || 'auto' }" />
          <col :style="{ width: `${20}px` || 'auto' }" />
        </colgroup>
        <thead>
          <tr>
            <!-- column width is the sum of child column widths -->
            <th :colspan="2" :rowspan="1" class="text-center">Group Col</th>
          </tr>
          <tr>
            <!-- column width coming from configuration file -->
            <th :colspan="1" :rowspan="1" class="text-center">Col 1</th>
            <!-- column width coming from configuration file -->
            <th :colspan="1" :rowspan="1" class="text-center">Col 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td :rowspan="2">Col 1, Rowspan 2</td>
            <td :rowspan="1">Col 2, Rowspan 1</td>
          </tr>
          <tr>
            <td :rowspan="1" class="d-none">Col 1, Rowspan 1</td>
            <td :rowspan="1">Col 2, Rowspan 1</td>
          </tr>
        </tbody>
      </v-table>
    Login or Signup to reply.
  2. 0

    First you have wrong html because when td has rowspan="2" then the next tr td should be one. Second, you can set min-width: 20px; max-width: 0; for the last cells:

    table td {
  width: 300px;
}

table td:last-child,
table th:last-child {
  min-width: 20px;
  max-width: 0;
}

/* debugging */
table td ,
table th {
  border: solid 1px red;
}
    <table>
  <thead>
    <tr>
      <th colspan="2">Group Col</th>
    </tr>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Col 1, Rowspan 2</td>
      <td>Col 2, Rowspan 1</td>
    </tr>
    <tr>
      <td class="d-none">Col 1, Rowspan 1</td>
    </tr>
  </tbody>
</table>

    Vuetify Play

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search