Question 206140 in CSS Question posted in
Some basic documentation can be found here.

Css – How to pass a fixed width to a column in a Vuetify HTML table?

I’m using a Vuetify table and based on a configuration I want to set fixed column widths. I thought it would be fine to assign the width from the configuration to the width CSS attribute.

The first example ( Playground ) should display a table with a total width of 350px. When having a look at the playground you will see that the table takes the whole screen width instead.

<template>
  <v-table>
    <thead>
      <tr>
        <th style="width: 300px">Col 1</th>
        <th style="width: 50px">Col 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Item 1</td>
        <td>Item 2</td>
      </tr>
    </tbody>
  </v-table>
</template>

The second example ( Playground ) should display a table with a total width of 6300px. The first column should be too big for the screen so there should be a horizontal scrollbar. Instead the table shrinks the first column down to a smaller width so the whole table fits the screen width.

<template>
  <v-table>
    <thead>
      <tr>
        <th style="width: 6000px">Col 1</th>
        <th style="width: 300px">Col 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Item 1</td>
        <td>Item 2</td>
      </tr>
    </tbody>
  </v-table>
</template>

How can I disable this behaviour? The table should have exact columns widths ( based on the configuration values ). I tried

  • <v-table style="min-width: none; max-width: none"> no changes
  • <v-table style="overflow: auto"> no changes
  • <v-table style="width: max-content"> works if table is smaller than screen size, prevents scrollbar
  • <v-table style="width: min-content"> is too small
  • <v-table style="width: auto"> no changes

but unfortunately that didn’t fix it. Do you have any ideas?

Tags:

2

Answers


  1. 0

    Instead of giving the fixed ,go with the max-width and give the width 100% .By doing this your design will stay responsive.

    Login or Signup to reply.
  2. 0

    You can use CSS to achieve this. First you must use this CSS for the <table> tag:

    .v-table__wrapper table {
  table-layout: fixed;
  width: 0;
}

    And then you can define the width for the columns using nth-child() CSS selector:

    .v-table__wrapper table th:nth-child(1),
.v-table__wrapper table td:nth-child(1) {
  width: 300px;
}

.v-table__wrapper table th:nth-child(2),
.v-table__wrapper table td:nth-child(2) {
  width: 50px;
}

    here is the working demo in playground

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

Back To Top
Search