如何自定义Laravel Filament表格尺寸及相关样式

一、全局自定义CSS（影响所有表格） #

在Filament的自定义CSS文件（如resources/css/filament.css）中添加以下样式，覆盖默认表格样式：

/* 调整表格整体字体与基础样式 */
.filament-tables-table {
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
}

/* 调整表头内边距与行高 */
.filament-tables-header-cell {
    padding: 0.5rem 0.75rem;
    line-height: 1.2;
}

/* 调整表格内容行的内边距与行高 */
.filament-tables-row-cell {
    padding: 0.5rem 0.75rem;
    line-height: 1.3;
}

/* 可选：缩小表格容器最大宽度 */
.filament-tables-container {
    max-width: 1200px;
    margin: 0 auto;
}

在Filament面板配置文件（app/Providers/Filament/AdminPanelProvider.php）中引入该CSS：

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // 其他配置项
        ->viteTheme('resources/css/filament.css');
}

二、针对单个表格单独调整 #

在目标表格的Resource类中，给表格添加自定义类：

use Filament\Tables\Table;

public static function table(Table $table): Table
{
    return $table
        ->extraAttributes(['class' => 'custom-small-table'])
        // 其他表格配置
        ->columns([
            // 列定义
        ]);
}

然后在CSS中针对该类设置专属样式：

.custom-small-table .filament-tables-header-cell {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
}

.custom-small-table .filament-tables-row-cell {
    padding: 0.4rem 0.6rem;
    line-height: 1.2;
    font-size: 0.8rem;
}

三、行高与内边距的快捷配置 #

• 针对单个列自定义内边距与字体大小：

TextColumn::make('name')
    ->extraAttributes(['class' => 'py-2 px-3'])
    ->size('sm');

• 统一设置所有列的行高：

public static function table(Table $table): Table
{
    return $table
        ->defaultColumnAttributes([
            'class' => 'py-2',
        ])
        // 其他配置
}

四、限制表格容器宽度 #

若表格过宽，可通过CSS调整页面容器宽度：

.filament-page-section-content {
    max-width: 90%;
    margin: 0 auto;
}

内容的提问来源于stack exchange，提问作者Mohamed Abdelati