Как выставить размер карточки таким образом, чтобы он подстраивался под маленькое количество контента?

Чтобы сделать карточку с таблицей адаптивной и позволяющей изменять размер в зависимости от количества контента, вам нужно убедиться, что стили CSS и свойства компонентов правильно настроены. Вот несколько рекомендаций, как вы можете добиться этого:

1. **Убедитесь, что карточка не имеет фиксированных размеров**: Убедитесь, что вы не задаете фиксированные значения ширины или высоты для карточки. Вместо этого используйте проценты или `auto`.

2. **Используйте `flexbox` для управления размерами**: Если карточка или родительский элемент содержит свойства `display: flex`, это может помочь вам сделать элементы более адаптивными. Например:
   
   ```css
   .card {
       display: flex;
       flex-direction: column;
       width: 100%;  /* Занимает всю ширину родителя */
   }
   ```

3. **Настройте таблицу**: Убедитесь, что таблица не имеет фиксированного размера. Например, используйте `width: auto` для ячеек или колонок:
   
   ```css
   table {
       width: auto;  /* Автоматическая ширина */
   }

   th, td {
       padding: 10px;  /* Добавьте немного отступов для уютного чтения */
   }
   ```

4. **Медиа-запросы**: Если вы хотите, чтобы карточка выглядела по-разному на разных размерах экрана, используйте медиа-запросы для изменения стилей на основании ширины экрана.

5. **Редактирование компонента Quasar**: Если вы используете компонент Quasar, то изучите документацию, чтобы понять, как можно управлять размерами и свойствами таблиц. Вы можете использовать такие свойства, как `:style="{ height: 'auto' }"` для управления высотой.

6. **Пример CSS для адаптивной карточки**:
   ```css
   .responsive-card {
       display: flex;
       flex-direction: column;
       max-width: 100%;
       margin: 0 auto; /* Центрируем карточку */
       padding: 16px;
       border: 1px solid #ccc; /* Пример границы */
       border-radius: 4px; /* Немного закругляем углы */
   }
   ```

Что касается вашего вопроса относительно реализации функциональности «прилипшего» заголовка, вы можете использовать JavaScript для отслеживания прокрутки и динамически менять стиль заголовка, например, добавляя `position: sticky;` на заголовок таблицы, когда он достигает верхней части карточки.

Если нужно больше специфики, пожалуйста, предоставьте фрагмент кода, который вызывает проблему, и я помогу вам с конкретными изменениями.

.q-card {
  display: flex;
  flex-direction: column;
--  height: 100%;
++  height: fit-content;
}
.q-card__section {
  max-height: full;
  overflow: auto;
--  flex-basis: 0;
--  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.q-table__container {
  overflow: auto;
--  flex-basis: 0;
--  flex-grow: 1;
}