How to fix the width of ShadCN Table component to prevent resizing on page changes?

[MehdiDiasGomes]

Hi everyone,

I'm using the ShadCN UI Vue library and the Table component. Every time the page changes or when I update the data, the table's width keeps resizing because of the padding.
Is there a way to set a fixed width for the table so that it doesn't resize?
Any help would be appreciated!

Thanks!

TableHead.vue :

import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
    <slot />
  </th>
</template>

TableCell.vue :

import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <td :class="cn('py-2 px-4 align-middle [&:has([role=checkbox])]:pr-0', props.class)">
    <slot />
  </td>
</template>